將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表中

回答

相關問題