将json数据提交到html表中

我需要基于json响应构建一个表，调用API时调用API，调用API并让JSON工作正常，但我没有发现任何有关构建表的文档并从x.js传递给x.html。我成功地从json传递了1个参数/值。将json数据提交到html表中

的json看起来像这样：（这是詹金斯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>

感谢罗南

来源

2013-12-13 user3087483

我会建议使用从YUI一个确定年代类或引导它会让你的工作很很容易 – AMY

你可以做这样的事情在你的HT毫升，而不是___{{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是一个数组，当您在HTML中使用{{#each}}它会通过这些循环，并为每一个创建行。

来源

2013-12-13 07:16:00 Akshat

谢谢，我真的需要它。 – user3087483

你的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); 
}

来源

2013-12-13 07:10:14 sylvhama

谢谢，这个解决方案也完美的作品。 – user3087483

这可能帮助你！。采用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) 
 
      { 
 
       
 
\t \t \t $("div").append(val.jobtitle + " <br/>"); 
 
      }); 
 
    
 
     }); 
 
}); 
 

 
</script> 
 
</head> 
 
<body> 
 

 

 
<div></div> 
 

 
</body> 
 
</html>

1. HTML FILE 2. JSON JS FILE

来源

2016-05-22 22:35:34 user3556287

将json数据提交到html表中

回答

相关问题