Display dynamic JSON content using jquery - php

Question

I'm following through an example which deals with the following json object passed from a php page:-
{"book":[{"title":"Harry Potter","author":"J K. Rowling","year":"2005","price":"29.99"},{"title":"Learning XML","author":"Erik T. Ray","year":"2003","price":"39.95"}]}
I know that you can iterate through and print all the data to a table as follows:
$.each(data.book, function(index, book) {
content = '<tr><td>' + book.title + '</td>';
content += '<td>' + book.author + '</td>';
content += '<td>' + book.year + '</td>';
content += '<td>' + book.price + '</td></tr>';
$(content).appendTo("#content2");
});
But say the json data is dynamic following the same structure, how can I adapt the above code to work for this? I was thinking I would need some sort of nested loop.
Whats causing me confusion is that for the line $.each(data.book, function(index, book) {
data.book will not always be data.book they would be data.foo
and the lines which refer to book.title will not always be the same it could be book.bar
Any guidance most appreciated

Answer 1

Yes you can do it in a nested loop like this
var content = '';
$.each(data.book, function(index, book) {
content += '<tr>';
$.each(book,function(k,v){
content += '<td>' + v + '</td>';
});
content += '</tr>';
});
$(content).appendTo("#content2");
http://jsfiddle.net/tjjQh/
Oh.. then use the for in loop
for (v in data) {
$.each(data[v], function(index, book) {
content += '<tr>';
$.each(book, function(k, v) {
content += '<td>' + v + '</td>';
});
content += '</tr>';
});
}
http://jsfiddle.net/8YCgA/
​

Answer 2

You may want to check out jQuery Templating.
var data = [
{ name : "John", age : 25 },
{ name : "Jane", age : 49 },
{ name : "Jim", age : 31 },
{ name : "Julie", age : 39 },
{ name : "Joe", age : 19 },
{ name : "Jack", age : 48 }
Can be expressed as:
<li>
<span>{%= $i + 1 %}</span>
<p><strong>Name: </strong> {%= name %}</p>
{% if ($context.options.showAge) { %}
<p><strong>Age: </strong> {%= age %}</p>
{% } %}
</li>