How to populate the page via JQuery after I have the json returned

Question

Ok so i have the json object returned back from my script and I have all the data but how do I put it on the page. Here is what i have so far

I have a php page which has a loop like this

<div class="main-blue">
<div class="blue-items">
<?php foreach ($related as $row_r) { ?>
<div class="item-blue">
<div class="image left">
<img src="<?php print $row_r['image'] == "" ? "css/images/blue-png2.png" : "css/images/{$row_r['image']}" ?>" alt="" />

As you can see the Php loop is looping through the array $related which has lots of products. I have an ajax call that can change the data in this array and regenerate the page. I have the new data from a getjson call

 $.getJSON('function.php?type=piz&count=5', function(data) {
 $(data).each(function(key, value) {
   console.log(value);
   });
});

How do i recreate the page using the new data

Answer 1

What I think you're talking about is client side templating. Rick Strahl has a good write up on the concept: http://www.west-wind.com/weblog/posts/509108.aspx

Answer 2

Your JS.
$.getJSON('function.php?type=piz&count=5', function(data) { $(data).each(function(key, value) { $('#contentHere').html(value); }); });

your html

<div id="contentHere"></div>