jQuery + table creation from json

Question

I have a JSON file

{
  "Scenario"    : "ModelNameHere",
  "id"          : "1",
  "description" : "Description of table model goes here",
  "headers"     : {
     "Column 1 header" : {
       "order"      : 1,
       "items"      : {
         "Row 1 Col 1 value" : {
           "id"         : 1,
           "comment"    : "Comment on Row 1 Col 1",
           "order"      : 1
         },
         "Row 2 Col 2 value" : {
           "id"         : 2,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     },
     "Column 2 header" : {
       "order"      : 2,
       "items"      : {
         "Row 1 Col 2 value" : {
           "id"         : 3,
           "comment"    : "Comment on Row 1 Col 2",
           "order"      : 1
         },
             "Row 2 Col 2 value" : {
           "id"         : 4,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     }
  }
}

I want to use jQuery to put the JSON data into an HTML table.

Headers should go inside TH td items, items inside headers should be elements in the TD of each related row.

Is there a function in either JS or jQuery to populate a table with JSON data?

How would I loop through and match JSON elements to table elements?

Thanks.

OP has 31 year :D Probably not homework :) – Ivan Ivanic Mar 11 '11 at 10:01 — Ivan Ivanic, Mar 11 '11 at 10:01
JSON string is not valid, first check this on `JSLINT.com` – xkeshav Mar 11 '11 at 10:29 — xkeshav, Mar 11 '11 at 10:29

score 1 · Answer 1 · answered Mar 11 '11 at 10:00

1

No, there is no such function as it is a really situational specific function.

It's quite easy to write though.
You can acces the JSON as a normal JS object.
This means you can just loop trough it and put the information in the right spots.

answered Mar 11 '11 at 10:00

Erik

630
3
9

score 1 · Answer 2 · edited May 23 '17 at 09:58

1

This question explores various templating engines, which could help you with what you are trying to achieve. You would still need to define the template for the table, but populating it will be very easy.

edited May 23 '17 at 09:58

Community

1
1

answered Mar 11 '11 at 10:02

kgiannakakis

103,016
27
158
194

1

http://api.jquery.com/tmpl looks interesting to follow up on. Now to just apply it to tables. – EarlyPoster Mar 11 '11 at 11:23

Ivan Ivanic · Answer 3 · 2011-03-11T10:52:30.033

1

Look at this plugin. There are many jQuery plugins so choose one that suits you. http://www.datatables.net Here is example from json, except that it is loaded from txt file but that is not problem. http://www.datatables.net/examples/data_sources/ajax.html

And here is how I suggest you restructure your json. In my honest opinion you should think here in terms of tables and not objects.

{
    "model" : "Model name here",
    "id" : 1,
    "description" : "Description of table model goes here",
    "headers" : {
        "header" : {
            "id" : 1,
            "order" : 1,
            "name" : "Col 1 header name" 
        },
        "header" : {
            "id" : 2,
            "order" : 3,
            "name" : "Col 2 header name" 
        } 
    },
    "row1" : {
        "item" : {
            "id" : 1,
            "name" : "Some td data comes here" 
        },
        "item2" : {
                "id" : 4,
            "name" : "Some td data comes here" 
        } 
    },
    "row2" : {
        "item" : {
            "id" : 2,
            "name" : "Some td data comes here" 
        },
        "item2" : {
            "id" : 3,
            "name" : "Some td data comes here" 
        } 
    } 
}

edited Mar 11 '11 at 10:52

answered Mar 11 '11 at 10:13

Ivan Ivanic

2,982
1
20
21

I've explored Datatables, jEditable, and jqGrid. Decided to go for personal code as it would be cleaner and I mostly only require 5-10% of the functionality of these bigger grid managers. – EarlyPoster Mar 11 '11 at 11:19
It looks like the newly (and beta) jQuery templates will suit my needs. Either way I'll post experiential notes as they come up. Thanks for the answer. – EarlyPoster Mar 11 '11 at 11:34
The new restructuring look better? – EarlyPoster Mar 14 '11 at 08:34
Still kind of struggling with getting easy iteration working. – EarlyPoster Mar 14 '11 at 10:36
Tables are constructed from left to right and than next row. Try to do something in that manner. – Ivan Ivanic Mar 14 '11 at 18:17

score 0 · Answer 4 · answered Mar 11 '11 at 10:02

0

if u r doing in PHP then use json_decode('jsonstring',true); that will comes as array and easily manipulate the array to create html

answered Mar 11 '11 at 10:02

xkeshav

53,360
44
177
245

1

why downvote?? actually given string is not valid json formatted – xkeshav Mar 11 '11 at 10:15
jQuery should imply that I want to construct this client side. Thanks for the answer though. – EarlyPoster Mar 11 '11 at 11:13

jQuery + table creation from json

4 Answers4