nested javascript object to HTML table

Question

I have a json data:

[
  {"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"}}
]

it looks like below in browser:

So I guess you understood what I want.. I need to generate html table with this data:

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

I create this recursive function to do that but it doesnt work.

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

Answer 1

You can use loops to get the data from your object. I am just printing the result here. You can append it to your table:

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>");

    }
}

I left the Extra column empty. You can use the last for loop get the data for Extra column. Let me know if you need further help.

Answer 2

i recomend using map() and your object array value is nested object so your value using value_["0"] or value_ so check values nested object need too.