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?

Answer 1

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" );
});