html 테이블에 json 데이터 피드

json 응답을 기반으로 테이블을 작성해야합니다. API를 호출 할 때 API를 호출하고 JSON이 올바르게 작동하도록 설정하면 테이블을 만드는 방법에 대한 문서가 없습니다. x.js에서 x.html로 전달합니다. 나는 json에서 단지 1 개의 param/value를 전달하는 데 성공한다.html 테이블에 json 데이터 피드

내 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>

감사 Ronen에

출처

2013-12-13 user3087483

나는 YUI에서 시일을 추정 클래스를 사용하는 것이 좋습니다하거나 작업을 매우 것 부트 스트랩 것이다 쉬운 – AMY

이를 통해 반복 할 수 있도록 ml의 대신 콜백 또한 ___{{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>

대신 하나 개의 값의 모든 데이터를 반환 :

대신 builds에서 반환 모든

Session.set("recentBuilds", respJson.builds[1].id);

의.

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 당신은 당신의 HT에서 이런 일을 할 수

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

이 5 월은 당신을 도와줍니다! .Using JQuery와 아약스해서 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

html 테이블에 json 데이터 피드

답변

관련 문제