javascript - 循环遍历json对象来创建jquery表

Question

首先，我是 JSON 和 Javascript 的绝对新手，所以如果我问这个愚蠢的问题，我深表歉意。

我有一个以下格式的 JSON 对象

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

我想使用列和模型作为行来动态创建 HTML 表。

我只是超出了我的能力范围，因此我们将不胜感激。

Answer 1

JSRender将帮助您以最少的工作创建一张 table 。请按照步骤操作

1. 使用列创建模板

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

2. 使用$.templates注册模板

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

3. 调用模板的render方法并获取输出字符串。

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

然后将结果放置在您想要的任何位置。