将 json 数据输入 html 表答案

【问题标题】：feed json data into html table将 json 数据输入 html 表
【发布时间】：2013-12-31 21:09:06
【问题描述】：

我需要根据调用 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>

谢谢罗南

【问题讨论】：

我会推荐使用 YUI 中的数据类或引导程序，它会让你的工作变得非常轻松

标签： javascript html json meteor

【解决方案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);

返回builds中的所有内容。

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

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

【讨论】：

谢谢，我真的需要它。

【解决方案2】：

这可能对你有帮助！.使用 jquery ajax getjson

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 
<script>
  $(document).ready(function(){
       
  var data=$.getJSON("test.js",function(data)
      {
       $.each(data.results,function( key, val ) 
          {
             
			 $("div").append(val.jobtitle + " <br/>");
          });
 
      });
});

</script>
</head>
<body>


<div></div>

</body>
</html>

1. HTML FILE 2. JSON JS FILE

【讨论】：

【解决方案3】：

你的 HTML

<table id="result">
  <tr>
    <th>Duration</th><th>ID</th><th>Number</th><th>Result</th><th>Timestamp</th>
  </tr>
</table>

你的 JS

for (obj in respJson.builds) {
  var line = '<tr><td>' + obj.duration + '</td><td>' + obj.id + '</td><td>' + obj.number + '</td><td>' + obj.result + '</td><td>' + obj.timestamp + '</td><td>';
  $('#result').append(line);
}

【讨论】：