передать данные JSON в HTML-таблицу

Question

передать данные JSON в HTML-таблицу

0

Мне нужно создать таблицу на основе json-ответа, который я получаю при вызове API, вызывая API и получая JSON, отлично работает, просто я не нашел никакой документации о создании таблицы и переходе от x.js к x.html, Мне удалось передать только 1 парам/значение из json.

мой json выглядит так: (это результат API Jenkins)

    {
   "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>

Благодаря Ronen

user3087483 13 дек. 2013, в 08:35

Источник

0

Я рекомендую использовать датируемый класс из YUI или начальную загрузку, это сделает вашу работу очень легкой
AMY 13 дек. 2013, в 06:59

Теги:

javascript

html

json

meteor

3 ответа

0

Это может помочь вам!. Использование 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. ФАЙЛ ФАЙЛА 2. JSON JS FILE

user3556287 22 май 2016, в 21:03

0

Ваш 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);
}

sylvhama 13 дек. 2013, в 05:04

0

Спасибо, это решение также работает отлично.
user3087483 14 дек. 2013, в 15:54

Ещё вопросы

Я рекомендую использовать датируемый класс из YUI или начальную загрузку, это сделает вашу работу очень легкой
Спасибо, это решение также работает отлично.

Akshat · Accepted Answer · 2013-12-13T06-13-00.000Z

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

Спасибо, мне это действительно нужно.