Parse JSON with jQuery and write HTML

Question

I need to create a list in a "grid" style, so there will be some. Each "info box" will have information taken from JSON. How to do so?

PHP file echo in JSON 2 elements for item and depending by the week, a different quantity of element. How i can create the right number of "info box" ( based of the number of json items ) and how to add the name and price of them? This is the HTML code for the "info-box":

<div class="item">
    <span id="itemname">*itemname*</span>
<div id="price" class="price">*price*</div>
        </div>

How should I create box (with Jquery) and add information received from JSON?

stef · Accepted Answer · 2011-07-20 07:39:19Z

4

You could use a Jquery Template (or Mustache, or similar).

Create your template and output it in HTML:

<script id="itemTemplate" type="text/x-jquery-tmpl">
    <div class="item">
        <span id="itemname">${name}</span>
        <div id="price" class="price">${price}</div>
    </div>
</script>

<div id="itemList" />

And in Javascript (with Jquery):

// Load your json into var some_json
$.each(some_json, function(item) {
    $( "#itemTemplate" ).tmpl( item ).appendTo( "#itemList" );
});

answered Jul 20, 2011 at 7:39

stef

14.3k2 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parse JSON with jQuery and write HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related