Question

我有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分钟：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){


  }
});

Answer 1

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

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

Answer 2

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

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

这是使用jQuery ofc。

Answer 3

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

如果你想在客户端做，我认为你必须手动创建table，tr和td元素并填充它们。 ExtJS已准备就绪。

服务器端更容易。

Answer 4

我在这里创建了一个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');

作为T.J. Crowder评论说，有效的HTML4 id属性不能以数字开头。如果我是你，我会用字符串（<td id="prefix' + result[i].id + '">0</td>）作为前缀。

MrOBrian建议使用渲染引擎。也许对于这样一个简单的情况，如果你不需要其他地方的渲染引擎，那就太过分了，但如果你将来需要更复杂的东西，这绝对值得考虑。

Answer 5

建议修复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
      });
});

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

JSON数组到HTML表并显示td标记内的数据

5 个答案: