CODEWITHSUNDEEP
javascriptjqueryjson
EarlyPoster
EarlyPoster

Reputation: 1088

jQuery + table creation from json

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.

Upvotes: 1

Views: 838

Answers (4)

Ivan Ivanic
Ivan Ivanic

Reputation: 3044

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" 
        } 
    } 
}

Upvotes: 1

kgiannakakis
kgiannakakis

Reputation: 104168

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.

Upvotes: 1

xkeshav
xkeshav

Reputation: 54016

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

Upvotes: 0

Erik
Erik

Reputation: 630

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.

Upvotes: 1

Related Questions