Используйте данные URL JSON для динамического заполнения таблицы HTML - PullRequest
Новая
       47

Используйте данные URL JSON для динамического заполнения таблицы HTML

1 голос
/ 13 февраля 2012

У меня есть эта таблица HTML на моей странице, и я хочу динамически заполнить ее данными из этого URL JSON: http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=1055

Честно говоря, я не знаю лучшего способа сделать это, но из того, что я нашел, JSON-шаблонирование, похоже, то, что я должен использовать. Я нашел "Pure.js" (http://beebole.com/pure/) и "Mustache.js" (https://github.com/janl/mustache.js), которые используют Javascript, чтобы помочь преобразовать данные JSON в HTML. Я не могу понять, как загрузить данные из URL, использующий их, в примере все используют статическую строку. Могу ли я / должен ли я сделать это с AJAX, jQuery? Данные из URL 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>

Ответы [ 2 ]

0 голосов
/ 21 января 2013

Я не уверен, что вы все еще ищете примеры.Если так, то он вам нужен.

pure.js работает как плагин jQuery, поэтому вы можете использовать функцию 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.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>
0 голосов
/ 13 февраля 2012

Демонстрация на странице Distal http://code.google.com/p/distal, кажется, достигает того, что вы пытаетесь сделать выше.

...