使用JSON URL數據，以動態填充HTML表

Question

我有我的網頁上這個HTML表，我想從這個JSON URL數據動態填充：http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=1055

老實說，我不知道的最好方式做到這一點，但從我發現的JSON模板似乎是我應該使用的。我找到了使用Javascript幫助將JSON數據轉換爲HTML的「Pure.js」（http://beebole.com/pure/）和「Mustache.js」（https://github.com/janl/mustache.js）。我無法弄清楚如何使用這些URL加載數據，這個例子都是使用靜態字符串。我可以/應該使用AJAX，jQuery來做到這一點嗎？來自JSON網址的數據每天都在變化。

我在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作爲jQuery插件使用，因此您可以使用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"}} 

我還添加了小幅改動HTML模板爲了簡化pure.js指令模式。請記住，最終的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>