嵌套的javascript对象到HTML表

时间:2016-06-21 08:47:32

标签: jquery

我有一个json数据:

[
  {"OrderId":{"0":"20160620041104"}},
  {"GroupId":{"0":"20160620041104"}},
  {"Response":{"0":"Error"}},
  {"AuthCode":{}},
  {"HostRefNum":{}},
  {"ProcReturnCode":{"0":"99"}},
  {"TransId":{"0":"16172QLEH07028517"}},
  {"ErrMsg":{"0":"Kredi karti numarasi gecerli formatta degil."}},
  {"Extra":{"SETTLEID":{},"TRXDATE":"20160620 16:11:04","ERRORCODE":"CORE-2012","NUMCODE":"992012"}}
]

它在浏览器中如下所示: enter image description here

所以我猜你明白我想要的东西..我需要用这些数据生成html表:

<tr>
<td>OrderId</td>
<td>20160620...</td>
</tr> 
<tr>
<td>GroupId</td>
<td>2016..</td>
</tr> 
<tr>
<td colspan="2"><b>Extra</b></td>//just add a empty row. no big deal
</tr>
<tr>
<td>ERRCODE</td>
<td>CORE-2012</td>
</tr> ..

我创建这个递归函数来做到这一点,但它不起作用。

var printObjectKeys = function (currentObject) {
        $.each(currentObject,function (index, value) {
            if($.type(value) == 'object'){
                debugger
                var keys = Object.keys(value);
                if(keys.length > 0){
                    $.each(value, function (index_,value_) {
                        debugger
                        if($.isNumeric(index_)){
                            //print table row
                            $("#tblDetail").append('<tr><td>'+index_+'</td><td>'+value_+'</td></tr>')
                        }
                        else
                            printObjectKeys(value_)
                    })
                }
            }
        });
    }

2 个答案:

答案 0 :(得分:3)

您可以使用循环从对象获取数据。我只是在这里打印结果。您可以将它附加到您的表格中:

var json = [
  {"OrderId":{"0":"20160620041104"}},
  {"GroupId":{"0":"20160620041104"}},
  {"Response":{"0":"Error"}},
  {"AuthCode":{}},
  {"HostRefNum":{}},
  {"ProcReturnCode":{"0":"99"}},
  {"TransId":{"0":"16172QLEH07028517"}},
  {"ErrMsg":{"0":"Kredi karti numarasi gecerli formatta degil."}},
  {"Extra":{"SETTLEID":{},"TRXDATE":"20160620 16:11:04","ERRORCODE":"CORE-2012","NUMCODE":"992012"}}
];

for(var i=0; i<json.length; i++) {
    var currentObject = json[i];
    currentObjectKeys = Object.keys(currentObject);
    for(var j=0; j<currentObjectKeys.length; j++) {
        var headingToDisplay = currentObjectKeys[j];
        var textToDisplay = "";
        var value = currentObject[headingToDisplay  ];
        if(Object.keys(value).length == 1) {
            textToDisplay = value[Object.keys(value)[0]];
        }
        else if(Object.keys(value).length > 1) {
            //This is for last row 'Extra',left blank now
            for(var k=0; k<Object.keys(value); k++) {

            }
        }

        console.log("<tr><td>" + headingToDisplay + "</td><td>" + textToDisplay + "</td></tr>");

    }
}

我将Extra列留空了。您可以使用last for循环获取Extra列的数据。如果您需要进一步的帮助,请告诉我。

答案 1 :(得分:-2)

我建议使用map() 并且您的对象数组值是嵌套对象,因此您的值使用 value _ [“0”] value _ 因此也需要检查嵌套对象的值。