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

Could you change the format of the response? It's not well formatted for displaying in a table, as each property is in its own object within the array. That's a huge pain to access effectively. — Rory McCrossan
– Rory McCrossan, Commented Jun 21, 2016 at 8:52

Shwetha · Accepted Answer · 2016-06-21 09:28:49Z

3

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.

edited Jun 21, 2016 at 9:28

answered Jun 21, 2016 at 9:23

Shwetha

9138 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nouman arshad Over a year ago

good idea remain part is not so difficult i am using this too

TyForHelpDude Over a year ago

Yes it look well, and I can complete but what if data format chance I mean another nested object inside of that object('SETTLEID') than I would need to update the code rigth ? is it a way do this more efficient independent from deep of object

Sipubot · Accepted Answer · 2016-06-21 08:55:39Z

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

answered Jun 21, 2016 at 8:55

Sipubot

11 bronze badge

Collectives™ on Stack Overflow

nested javascript object to HTML table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related