Clever Geek Handbook

Loop through json object to create jQuery table

First of all, I'm completely new to JSON and Javascript, so I apologize if I ask this stupid question.

I have a JSON object in the following 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 an HTML table using columns and a string model.

I'm just from deep inside here, so any help would be appreciated.

+3


source to share


2 answers


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 have to specify the variable in JS using camelCase.

0


source


JSRender helps you create a spreadsheet with minimal work. Follow the instructions

  • Create a template with 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

    the template method and get the output string.

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


Then place the result where you want it.

0


source






More articles:


All Articles