Loading html and loop through json while changing html with json data?
Can't get my head around how to do this.
Basically, what I mean is...
I have a html file that I want to load, loop through the json data and for each json entry I want to add a new block of the html and insert the json data into the matching div/class of the html.
json looks like this:
- {"Super" : [{"Name" : "John Doe", "Age" : "30"}, {"Name" : "Jane Doe", "Age" : "40"}]};
html looks like this:
- <div class="Name"></div><div class="Age"></div>
So for each json entry of name/age, I want to insert that into the html, and then add another row, until all json data has been fetched. After this I want to insert all of this into #box, which is just a div that should contain that html.
I tried experimenting but I'm not that familiar with jQuery yet so I'm really out of ideas here.
Any help would be GREATLY appreciated.
Looping like this obviously does not work, since I just keep replacing the same html through the loop.
- var jsonData = {"Super" : [{"Name" : "John Doe", "Age" : "30"}, {"Name" : "Jane Doe", "Age" : "40"}]};
-
- $.each(json.Super, function() {
- $('#box .Name').html(this.Name);
- $('#box .Age).html(this.Age);
- });