Jquery & Ajax - How To Use Json To Create New Html Elements?

[QuakeLive]

EDIT: In the meantime I solved this - the answer is at the end

 

Hi,

First of all - I apologize - my English is bad.

I have this JSON data in file mydata.json:

[
  {"name": "Aster", "product": "aster", "stock": "10", "price": "2.99"},
  {"name":"Daffodil","product":"daffodil","stock":"12","price":"1.99"},
  {"name":"Rose","product":"rose","stock":"2","price":"4.99"},
  {"name":"Peony","product":"peony","stock":"0","price":"1.50"},
  {"name":"Primula","product":"primula","stock":"1","price":"3.12"},
  {"name":"Snowdrop","product":"snowdrop","stock":"15","price":"0.99"}
]

I want to use this JSON to create the following HTML elements (using jQuery/Ajax):

<div class="dcell">
      <img src="images/aster.png"/>
      <label for="aster">Aster:</label>
      <input type="text" id="aster" name="aster" value="0" stock="10" price="2.99" required>
</div>
<div class="dcell">
      <img src="images/daffodil.png"/>
      <label for="daffodil">Daffodil:</label>
      <input type="text" id="daffodil" name="daffodil" value="0" stock="12" price="1.99" required >
</div>
<div class="dcell">
      <img src="images/rose.png"/>
      <label for="rose">Rose:</label>
      <input type="text" id="rose" name="rose" value="0" stock="2" price="4.99" required>
</div>  
<div class="dcell">     
      <img src="images/peony.png"/>
      <label for="peony">Peony:</label>
      <input type="text" id="peony" name="peony" value="0" stock="0" price="1.50" required>
</div>
<div class="dcell">
      <img src="images/primula.png"/>
      <label for="primula">Primula:</label>
      <input type="text" id="primula" name="primula" value="0" stock="1" price="3.12" required >
</div>
<div class="dcell">
      <img src="images/snowdrop.png"/>
      <label for="snowdrop">Snowdrop:</label>
      <input type="text" id="snowdrop" name="snowdrop" value="0" stock="15" price="0.99" required>
</div>            

but I'm not sure how to solve this problem (using jQuery/Ajax).  

 

I started this:

<script type="text/javascript">
    $(function() {
        $("<button>Ajax</button>").appendTo("#buttonDiv").click(function(e) {
            $.getJSON("mydata.json", function(data) {
                  ///??????????????????????????????
            });
            e.preventDefault();
        });
    });
</script>

... and I don't know how to do it.

 

Do you know how I could do this, is there a simple and elegant way to do this? 

 

Thank you in advance!

 

 

 

 

Solution (it's so easy // embarrassed):

    $.getJSON("mydata.json", function(data) {
        var html = '';
        $.each(data, function(key, value){
            html += '<div class="dcell">';
            html += '<img src="images/'+value.product+'.png"/>';
            html += '<label for="'+value.product+'">'+value.name+':</label>';
            html += '<input type="text" id="'+value.product+'" name="'+value.product+'" value="0" stock="'+value.stock+'" price="'+value.price+'" required>';
            html += '</div>';
        });
    $('#yourContainerId').html(html);
    });

[Larry]

Kudos for figuring it out and thanks for sharing your solution!