feed json data в таблицу html

Мне нужно построить таблицу на основе json-ответа, которую я получаю при вызове API, , вызывающего API и получающего JSON, отлично работает, просто я не нашел никакой документации о построении таблицы и перейти от x.js к x.html. Мне удалось передать только 1 парам/значение из json.feed json data в таблицу 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 или самонастройки это сделает вашу работу очень easy – AMY

Вы могли бы сделать что-то подобное в вашей ХТ мл вместо ___{{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 и создать строку для каждого из них.

источник

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

Это может поможет вам! .Using 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

feed json data в таблицу html

ответ

Смежные вопросы