loop through a json object to create table jquery

Question

First of all I am an absolute newbie to JSON and Javascript so I apologise if I ask this stupid question.

I have a JSON Object in the below format

var Regions = 
{
    "ErrorInfo": {
        "Success": true,
        "ErrorCode": "",
        "Program": "",
        "Method": "",
        "Message": "",
        "Details": "",
        "StackTrace": "",
        "ErrorList": []
    },
    "Results": {
        "CubeName": "MyCube",
        "ViewName": "AllRegions",
        "SandboxName": null,
        "SpreadConsolidations": "False",
        "TitleDimensions": {
            "actvsbud": {
                "DimName": "actvsbud",
                "ID": "Budget",
                "Name": "Budget",
                "DataType": 0,
                "IsUpdated": false,
                "Attributes": {

                },
                "Caption": null
            },
            "region": {
                "DimName": "region",
                "ID": "Norway",
                "Name": "Norway",
                "DataType": 0,
                "IsUpdated": false,
                "Attributes": {

                },
                "Caption": null
            },
            "account1": {
                "DimName": "account1",
                "ID": "Units",
                "Name": "Units",
                "DataType": 0,
                "IsUpdated": false,
                "Attributes": {

                },
                "Caption": null
            }
        },
        "RowSet": {
            "RowCount": 4,
            "TotalRowCount": 4,
            "Rows": [{
                "model": "S Series 1.8 L Sedan",
                "_1Quarter": 320,
                "Jan": 90,
                "Feb": 110,
                "Mar": 120
            },
            {
                "model": "S Series 2.0 L Sedan",
                "_1Quarter": 250,
                "Jan": 80,
                "Feb": 80,
                "Mar": 90
            },
            {
                "model": "S Series 2.5 L Sedan",
                "_1Quarter": 290,
                "Jan": 90,
                "Feb": 90,
                "Mar": 110
            },
            {
                "model": "S Series 2.5 L Sedan 4WD",
                "_1Quarter": 30,
                "Jan": 10,
                "Feb": 10,
                "Mar": 10
            }],
            "ColDims": "month"
        },
        "Columns": {
            "model": {
                "Source": "Member",
                "Name": "",
                "DimName": "model",
                "SourceDataType": 0,
                "DataType": 0,
                "ID": null
            },
            "_1Quarter": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "1 Quarter",
                "ID": "1 Quarter",
                "Attributes": {

                },
                "DimName": "month"
            },
            "Jan": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "Jan",
                "ID": "Jan",
                "Attributes": {

                },
                "DimName": "month"
            },
            "Feb": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "Feb",
                "ID": "Feb",
                "Attributes": {

                },
                "DimName": "month"
            },
            "Mar": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "Mar",
                "ID": "Mar",
                "Attributes": {

                },
                "DimName": "month"
            }
        },
        "RowTemplate": {
            "model": "",
            "_1Quarter": 0,
            "Jan": 0,
            "Feb": 0,
            "Mar": 0
        }
    }
};

I would like to dynamically create a HTML Table using the Columns and model as the rows.

I simply out of my depth here so any help would be appreciated.

Check http://docs.telerik.com/kendo-ui/api/javascript/ui/grid — suvroc, May 27 '15 at 06:25
If you will use [Datatable JQuery plugin](https://www.datatables.net/) Than this [answer](http://stackoverflow.com/a/24929043/2115584) can be useful for you — Baximilian, May 27 '15 at 06:28

Valery Bugakov · Answer 1 · 2015-05-27T07:00:09.287

Something like this without external plugins:

var jsonToTable = function(json) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        })        
        odd_even = !odd_even;               
    })
    $("#tableId").appendChild(tbl_body);
});

jsonToTable(Regions.Rowset.Rows);

Also, you should name variable in JS using camelCase.

score 0 · Answer 2 · answered May 27 '15 at 06:39

JSRender will help you create a table with minimun work. Please follow the steps

Create a template using Columns

 function renderTemplate()
 {
   var res = "<tr>";
   for(var p in Region.Columns){
    res += "<td>{{:"+p+"}}</td>";
 }
   return res + "</tr>";
 }

Register the template using $.templates

$.templates({tableTemp: renderTemplate() });

Call render method of template and get the output string.

 var tbody = "<table>" + $.render.tableTemp(Regions.Rowset.Rows) "</table>"

Then place the result in anywhere as your desired.

loop through a json object to create table jquery

2 Answers2