Search the Community

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