javascript - 将 json 数据输入 html 表

Question

我需要根据调用 API 时收到的 json 响应构建一个表，调用 API 并获取 JSON 工作正常，只是我没有找到任何有关构建表并从 x.js 传递到 x.html 的文档。我成功地从 json 中仅传递了 1 个参数/值。

我的 json 看起来像这样:(它是 Jenkins API 结果)

    {
   "builds":
   [
       {
           "duration": 24503,
           "id": "2013-12-11_19-48-55",
           "number": 33,
           "result": "FAILURE",
           "timestamp": 1386791335164
       },
       {
           "duration": 24553,
           "id": "2013-12-11_19-00-27",
           "number": 32,
           "result": "FAILURE",
           "timestamp": 1386788427803
       },
       {
           "duration": 24237,
           "id": "2013-12-11_18-59-51",
           "number": 31,
           "result": "FAILURE",
           "timestamp": 1386788391179
       },

JS代码

    Meteor.call('jenkinsServiceBuild', function(err, respJson) {

    if(err) {
      window.alert("Error: " + err.reason);
      console.log("error occured on receiving data on server. ", err );
    } else {
      //window.alert("Success: ");
      console.log("respJson: ", respJson.builds[1].id);
      //window.alert(respJson.length + ' tweets received.');
      var buildsList = respJson.builds[1].id;
      Session.set("recentBuilds", respJson.builds[1].id);
    }
    $('#buildButton').removeAttr('disabled').val('build');
  })
},  
 });

    Template.dashboard.helpers({
recentBuilds : function() {
return Session.get("recentBuilds");
//recentBuilds: buildsList

}});

HTML 代码

<template name="dashboard">
<div class="control-group">
    <div class="controls">
        <input type="button" value="build" class="btn btn-info" id="buildButton"/>
    </div>
    <br><br>
    ___{{recentBuilds}}___

    </template>

谢谢罗南

Answer 1

您可以在 html 中执行类似的操作，而不是 ___{{recentBuilds}}___

<table>
    <thead>
        <th>Duration</th><th>ID</th><th>Number</th><th>Result</th><th>Timestamp</th>
    </thead>
    <tbody>
    {{#each recentBuilds}}
        <tr>
            <td>{{duration}}</td>
            <td>{{number}}</td>
            <td>{{result}}</td>
            <td>{{timestamp</td>
        </tr>
    {{else}}
        <tr>
            <td colspan="4">No data</td>
        </tr>
    {{/each}}
    </tbody>
</table>

此外，在回调中返回所有数据而不是一个值，以便可以迭代:

而不是

Session.set("recentBuilds", respJson.builds[1].id);

返回构建中的所有内容。

Session.set("recentBuilds", respJson.builds);

现在因为 builds 中的所有内容都是一个数组，当您使用 {{#each}} 时，它会在 html 中循环遍历这些内容并为每个创建一行一个。