Rows And Columns Html Table (json Response)

I have the following code in index.html which grabs a dictionary list and prints out keys and values into a table $(function() { $('a#search').bind('click', function() { $.ge

Solution 1:

Because of the way the JSON is formatted you need to use multiple loops. If you have control over this formatting it would be much simpler to loop though it if formatted as follows :-

{"objects":[{"Developer":"Office Koukan","Publisher":"Shouei","ReleaseDate":"March 18, 1994","Title":"Idea no Hi"},{"Developer":"Jorudan","Publisher":"VAP","ReleaseDate":"November 18, 1994","Title":"Pachinko Hi Hisshouhou"},{"Developer":"Beam Software","Publisher":"Hi Tech Expressions","ReleaseDate":"October 1, 1993","Title":"hunThe Hunt for Red October"}]}

This will provide you a much more natural loop as you can loop through each object instead of looping back over each field grouping multiple times.

If you can't change the format, look at this jsfiddle http://jsfiddle.net/8TT4p/3538/.

I created a JS array to match your data. Ive looped through once to get the table header row setup. Then there's a triple nested loop to create a row for each record, then pull out the correct data for that row/column.

Hope it helps in some way