循环遍历json对象以创建表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.

Answer 1

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.

Answer 2

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

1. Create a template using Columns

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

2. Register the template using $.templates

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

3. 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.