1

ページにこの HTML テーブルがあり、この JSON URL からのデータを動的に入力したいと考えています: http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=1055

正直なところ、これを行う最善の方法はわかりませんが、私が見つけたものから、JSON テンプレートを使用する必要があるようです。Javascript を使用して JSON データを変換する"Pure.js" ( http://beebole.com/pure/ ) と "Mustache.js" (https://github.com/janl/mustache.js) を見つけました。 HTMLに。これらを使用して 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>
4

2 に答える 2

0

あなたがまだ例を探しているかどうかはわかりません。もしそうなら、あなたのためのものがあります。

pure.jsjQueryプラグインとして機能するため、jQuery ajax関数を使用してからデータをロードできます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.jsJSONドキュメントの構造が変更されない場合、ディレクティブは正常に機能します。現在は次のとおりです。

{"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>
于 2013-01-21T12:47:59.213 に答える
0

Distal ページhttp://code.google.com/p/distalのデモは、上記の目的を達成しているようです。

于 2012-02-13T07:03:56.880 に答える