Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
QuakeLive

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

 

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);
    });
  • Upvote 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

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

Loading...
Sign in to follow this  

×
×
  • Create New...