Use JSON URL Data to Dynamically Fill A HTML Table

[Jason]

I have this HTML table on my page and I want to fill it dynamically
with data from this JSON URL: http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=1055

I honestly don't know the best way to do this but from what I've found
JSON templating seems to be what I should use. I've found this
"Pure.js" I can't figure out how to load the data from the URL using
this, the examples are all using a static string. The data from the
JSON url changes daily, therefore I need to load it from the URL each
time.

The places I have in the HTML below with {...} are where I want the
data from the url to load into.

I'd appreciate if someone could point me in the right direction on how
to user PURE and hopefully provide me with a code sample to help me
get this working. This seems like the cleanest most simple way to do
this from what I have found. Thanks.

My Sample HTML Table:

<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>
</body>
</html>

[Mic (BeeBole)]

Your page on your server( you.com ) calls another
domain( runescape.com ), the Same Origin Policy prevents you to read
the JSON from your page.

You have 2 options.
Either you call this url from your server, and then receive it to your
page with an ajax call.

Or you need to find in their documentation if they enable something
called JSONP.

JSONP is adding a parameter, usually called "callback" in the url you
call:
http://services.runescape.com/m=itemdb_rs/ ... ? ...
&callback=doSomething

And the response should arrive wrapped in a function call like:
doSomething({{"item":{"icon":"http://services.runescape.com/m ... });

And finally in your code you have the function:
function doSomething( json ){
$('div').render(json, directive);
}

It seems there is another API available http://www.rsapi.net/ that
support JSONP

On Feb 13, 11:52 pm, Jason <jason.kap...@hotmail.com> wrote:
> I have this HTML table on my page and I want to fill it dynamically

> with data from this JSON URL:http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?i...