를 사용하여 JSON URL 데이터를 동적으로 내 페이지에 HTML 테이블이

Question

html로 테이블을 채우고 나는이 JSON의 URL에서 데이터를 동적으로 채우려합니다 : http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=1055이

나는 정직하게하는 가장 좋은 방법을 모르는 JSON 템플리트가 내가 사용해야하는 것으로 보인다. JSON 데이터를 HTML로 변환하는 데 Javascript를 사용하는 "Pure.js"(http://beebole.com/pure/) 및 "Mustache.js"(https://github.com/janl/mustache.js)를 발견했습니다. 이러한 URL을 사용하여 데이터를로드하는 방법을 알아낼 수 없으며 예제는 모두 정적 문자열을 사용하고 있습니다. AJAX, jQuery로이 작업을 수행 할 수 있습니까? 매일 JSON URL의 데이터가 변경됩니다.

{...}이 (가) 아래 HTML에있는 장소는 URL의 데이터를로드 할 위치입니다.

누군가가 올바른 방법으로이 작업을 수행 할 수있는 방법을 알려주고 코드 샘플을 제공해 주시면 고맙겠습니다.

<div class="item-details"> 
<div> 
<h5> 
{item.name} 
</h5> 
<p>Aaaarrrghhh ... I'm a monster.</p></div> 
<h6>Pricing Information:</h6> 
<table> 
<tbody> 
<tr> 
<th>Current guide price:</th> 
<td>{item.current.price}</td> 
</tr> 
<tr> 
<th>Today's Change:</th> 
<td class="{item.today.trend}">{item.today.price}</td> 
</tr> 
</tbody> 
<tr> 
<th>30 Day Change:</th> 
<td class="{item.day30.trend}">{item.day30.change}</td> 
</tr> 
<tr> 
<th>90 Day Change:</th> 
<td class="{item.day30.trend}">{item.day90.change}</td> 
</tr> 
<tr> 
<th>180 Day Change:</th> 
<td class="{item.day30.trend}">{item.day180.change}</td> 
</tr> 
</table> 
</div> 
</div> 

Answer 1

원위부 페이지 http://code.google.com/p/distal의 데모는 위에서 뭘 하려는지 달성 할 것으로 보인다.

Answer 2

아직 예제를 찾고 있는지 잘 모르겠습니다. 그렇다면 당신을위한 것이 하나 있습니다.

pure.js은 jQueryajax 기능을 사용하여 http://services.runescape.com/...에서 데이터를로드 할 수 있습니다.

$(function(){ 
    var directives = { 
     'h5' : 'item.name', 
     'td.currentPrice' : 'item.current.price', 
     'td.currentPrice@class' : function() {return "";}, 
     'td.todayTrend' : 'item.today.price', 
     'td.todayTrend@class' : 'item.today.trend', 
     'td.day30Trend' : 'item.day30.change', 
     'td.day30Trend@class' : 'item.day30.trend', 
     'td.day90Trend' : 'item.day90.change', 
     'td.day90Trend@class' : 'item.day90.trend', 
     'td.day180Trend' : 'item.day180.change', 
     'td.day180Trend@class' : 'item.day180.trend' 
    }; 

    $.ajax({ 
     url: 'http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=1055', 
     dataType: 'jsonp', 
     success: function(data) { 
      $('div.item-details').render(jsonData, directives); 
     } 
    }); 
}); 

pure.js 지침은 JSON 문서의 구조가 변경되지 않는 경우에 잘 작동합니다. 현재 다음과 같습니다 :

{"item":{"icon":"...","icon_large":"...","id":1055,"type":"...","typeIcon":"...","name":"...","description":"...","current":{"trend":"neutral","price":"131.2m"},"today":{"trend":"positive","price":"+1.1m"},"day30":{"trend":"positive","change":"+11.0%"},"day90":{"trend":"positive","change":"+14.0%"},"day180":{"trend":"positive","change":"+32.0%"},"members":"false"}} 

또한 pure.js 지시문 모델을 단순화하기 위해 HTML 템플릿에 약간의 변경 사항을 추가했습니다. 최종 HTML은 예상대로 표시되어야합니다.

<div class="item-details"> 
    <div> 
    <h5>{item.name}</h5> 
    <p>Aaaarrrghhh ... I'm a monster.</p> 
    </div> 
    <h6>Pricing Information:</h6> 
    <table> 
    <tbody> 
     <tr> 
     <th>Current guide price:</th> 
     <td class="currentPrice">{item.current.price}</td> 
     </tr> 
     <tr> 
     <th>Today's Change:</th> 
     <td class="todayTrend">{item.today.price}</td> 
     </tr> 
    </tbody> 
    <tr> 
     <th>30 Day Change:</th> 
     <td class="day30Trend">{item.day30.change}</td> 
    </tr> 
    <tr> 
     <th>90 Day Change:</th> 
     <td class="day90Trend">{item.day90.change}</td> 
    </tr> 
    <tr> 
     <th>180 Day Change:</th> 
     <td class="day180Trend">{item.day180.change}</td> 
    </tr> 
    </table> 
</div>