loop through nested json objects and display kay/value pair

Question

I have json object of which i want to print its key/value pair combination. but my object is nested one. so i want to loop through each object and display its key/value pair.

Fiddle : http://jsfiddle.net/ydzsaot5/

Code:

var html='';
var contextObj = {"CategoryID":"1","BillerID":"23","BillerName":"MERCS","RequestType":"QuickPay","AccountNo":"1234567890","Authenticator":"{\"EmailAddress\":\"dfgsdfgsdfg\",\"MobileNumber\":\"65-4576573\",\"ID\":\"4572-4756876-8\"}","Token":"3C639AE65"};

html = getKeyValueJson(contextObj, html);
$('div').html(html);
function getKeyValueJson(obj, html) {
    $.each(obj, function (key, value) {
        if (value == null) {
            return
        }
        if (typeof value == 'object') {
            getKeyValueJson(value, html);
        }
        else {
            html += '<label>' + key + '</label> :-  <label>' + value + '</label><br>';
        }
    });
    return html;
}

I want to print in this way :

....
AccountNo :- 1234567890
EmailAddress :- dfgsdfgsdfg
MobileNumber :- 65-4576573
....
Token :- 3C639AE65

Rajaprabhu Aravindasamy · Accepted Answer · 2014-10-09 06:07:37Z

2

Problem is in your json and in your code , you just given it as a string

"{\"EmailAddress\":\"dfgsdfgsdfg\",\"MobileNumber\":\"65-4576573\",\"ID\":\"4572-4756876-8\"}"

change it to

{"EmailAddress":"dfgsdfgsdfg","MobileNumber":"65-4576573","ID":"4572-4756876-8"}

var html = '';
var contextObj = {
  "CategoryID": "1",
  "BillerID": "23",
  "BillerName": "MERCS",
  "RequestType": "QuickPay",
  "AccountNo": "1234567890",
  "Authenticator": "{\"EmailAddress\":\"dfgsdfgsdfg\",\"MobileNumber\":\"65-4576573\",\"ID\":\"4572-4756876-8\"}",
  "Token": "3C639AE65"
};

html = getKeyValueJson(contextObj, html);
$('div').html(html);

function getKeyValueJson(obj, html) {
  $.each(obj, function(key, value) {
    
    value = parseIt(value) || value;
    
    if (value == null) {
      return
    }
    console.log(typeof value);
    if (typeof value == 'object') {
      html += getKeyValueJson(value, html);
    } else {
      html += '<label>' + key + '</label> :-  <label>' + value + '</label><br>';
    }
  });
  return html;
}

function parseIt(str) {
  try { return JSON.parse(str);  } catch(e) { return false; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
</div>

edited Oct 9, 2014 at 6:07

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Oct 9, 2014 at 5:55

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

4 Comments

Shaggy Over a year ago

Can you work it out without changing json object ?

Pranav C Balan Over a year ago

You can use something like JSON.parse()

Rajaprabhu Aravindasamy Over a year ago

@PranavCBalan I just edited the code due to out of curiosity.. Sorry if you feel that my activity is bad.. :\

Rajaprabhu Aravindasamy Over a year ago

@Shaggy Checkout his code and demo now.. A simple error catching technique needs to be implemented with it, since a string that cannot be converted into a JSON will throw a runtime error.

Collectives™ on Stack Overflow

loop through nested json objects and display kay/value pair

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related