Jump to content
Larry Ullman's Book Forums

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

Recommended Posts

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



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"},

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 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 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 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 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 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>

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) {

... 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>';
  • Upvote 1
Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...