0

我有 json 数组返回如下

{"id":16,"minutes":146}
{"id":17,"minutes":137}
{"id":18,"minutes":123}
{"id":22,"minutes":84}

我正在尝试在表 tbody td 内渲染上面的 json 数组，其中 json 数组 id 等于 td id，并在 td 标记内显示分钟

例如 json id :16 minute:146 并将其显示在<td id="16">146</td>

    <table>
      <thead>
        <tr>
          <th>op</th>
          <th>Minutes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>op1</td>
          <td id="16">0</td>
        </tr>
        <tr>
          <td>op2</td>
          <td id="17">0</td>
        </tr>
        <tr>
          <td>op3</td>
          <td id="18">0</td>
        </tr>
<!--....and goes on -->
      </tbody>
    </table>

js

$.ajax({ url: statUrl, type: 'POST',
  data: {
      begin: begin,
      end: end
  },
  success: function(data){


  }
});
4

5 回答 5

1

您的 JSON 无效，它应该只代表一个对象，您所拥有的有效版本将是

[{"id":16,"minutes":146},
{"id":17,"minutes":137},
{"id":18,"minutes":123},
{"id":22,"minutes":84}]
于 2012-07-17T23:12:08.930 回答
0

我在这里创建了一个 jsFiddle：http: //jsfiddle.net/5pKjW/11/ 正如 Musa 所说，您发布的 JSON 无效，它应该是一个包含所有对象的数组。以下代码基本上是您需要在成功回调中执行的操作，只需使用 data而不是result. 我所做的是创建一个表，为数组的每个元素附加一行，然后将整个表附加到 DOM 的一个元素。

var result = [{"id":16,"minutes":146},{"id":17,"minutes":137},{"id":18,"minutes":123},{"id":22,"minutes":84}];
var $table = $('<table><thead><tr><th>op</th><th>Minutes</th></tr></thead>'), 
    $tbody = $('<tbody>').appendTo($table),
    i;
for (i = 0; i < result.length; i++){
    $tbody.append('<tr><td>op' + (i+1) + '</td><td id="' + result[i].id + '">0</td></tr>');
}
$table.appendTo('#container');

正如 TJ Crowder 评论的那样，有效的 HTML4id属性不能以数字开头。如果我是你，我会在它前面加上一个字符串 ( <td id="prefix' + result[i].id + '">0</td>)。

MrOBrian 建议使用渲染引擎。也许对于像这样的简单案例，如果您在其他地方不需要渲染引擎，那就有点过头了，但是如果您将来需要更复杂的东西，那绝对是值得考虑的事情。

于 2012-07-17T23:47:21.160 回答
0

如果您的数据 ID 直接对应于现有的 DOM 元素 ID，那么它应该相当简单：

for (var i = 0;  i < data.length; i++) {
   $('#' + data[i].id).text(data[i].minutes);
}

这是使用 jQuery ofc。

于 2012-07-17T23:13:38.750 回答
0

按照建议将 json 数组固定为

{
 "25":72.3833,
 "17":116.3167,
 "16":25.75,
 "34":28.3333,
 "29":136.8831,
 "19":40.9166,
 "32":43.6,
 "22":83.9001
}

和js

$.getJSON(statUrl, {begin: begin, end: end}, function(data) {

      $.each(data, function(key, val) {
          $('#op_' + key).text(Math.ceil(val));//also fixed td id
      });
});

所以得到了预期的结果。谢谢你的时间。

于 2012-07-18T01:56:30.613 回答
0

您可以在 php 中使用json_decode($json, true)将 json 转换为数组，然后遍历它的元素并构建您的表。

如果你想在客户端做，我认为你必须手动创建 table、tr 和 td 元素并填充它们。ExtJS 已经为此准备好了网格。

服务器端更容易。

于 2012-07-17T23:19:54.013 回答