AJAX jquery returned json data looping key and value

Question

Hey all I currently have the following JSON returned when calling my ajax coldfusion .cfc page:

"[{\"USERA\": \"LiveP\", \"STATE\": \"None Given\", \"ROLES\": \"District Administrator<br/>Personnel Admin<br/>**** Coordinator\", \"ROLEASSIGNED\": \"LG AdminPersonnel System\", \"ADDRESS\": \"None Given\", \"UPDATEURL\": \"/personnel/search_ajax.cfc?func=edit=2*******\", \"TELEPHONE\": \"None Given\", \"ADDRESS2\": \"None Given\", \"ZIPCODE\": \"None Given\", \"LOCATION\": \"<a href=\\\"locations.cfm?func=view&locationID=\\\"2*******\\\">Demo New School (Primary)</a>\", \"SYSTEMID\": 87024, \"HOMETELEPHONE\": \"None Given\", \"MANAGEURL\": \"tools.cfm?userID=2*******\", \"MERGEURL\": \"/personnel/search_ajax.cfc?func=merge&userID=2*******\", \"EMAIL\": \"noaddress@noaddress.com\", \"SUBJECTTAUGHT\": \"None Given\", \"CITY\": \"None Given\", \"POSITION\": \"None Given\"}]"

When I run this code below it gives me the above JSON:

success: function(data) {
    var sData = JSON.stringify(data);                                     
    console.log(sData);
},

Now if I do not use JSON.stringify then my output is:

[Object]

What I am ultimatlly looking to do is loop through this returned JSON and get the key and value without needing to know the key (a.k.a. sData.Address, sData.Address2, sData.City, etc etc).

I plan on putting it in this type of format:

var theHTML = "";

$.each(data,function(key,value){
   theHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
})

Which that only returns:

<tr><td>0</td><td>[object Object]</td></tr>

I'm sure I'm just missing something little but I just can't find what that is.

You can parse JSON value and then iterate. Check http://stackoverflow.com/questions/7861032/loop-and-get-key-value-pair-for-json-array-using-jquery — user2894296, Sep 15 '16 at 15:46
Out of curiosity, if you are only expecting one element in the array, why not skip it and just return the structure? — Leigh, Sep 15 '16 at 16:31
(Edit) That does not require an array. In fact, using an array is what caused the issue in the first place. Since the cfc returns an array, the `$.each( )` is actually looping through the *array* itself (not the structure in the first position). So the callback function receives different values than you are expecting: `function (index, element)` instead of `function(key, value)`. See [jQuery.each()](http://api.jquery.com/jQuery.each/) . Get rid of the array, and your original code would have worked just fine. — Leigh, Sep 15 '16 at 21:07

score 6 · Accepted Answer · edited Sep 16 '16 at 22:34

6

It looks like your data is in an array and you want to loop over the first object in the array. You could try this.

var theHTML = "";

$.each(data[0],function(key,value){
   theHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
})

edited Sep 16 '16 at 22:34

Kara

6,115
16
50
57

answered Sep 15 '16 at 15:48

semone

171
6

Great job, semone! That did it! And welcome to **Stackoverflow**! – StealthRT Sep 15 '16 at 16:20

score 1 · Answer 2 · answered Sep 15 '16 at 16:44

Semone's solution will get you what you need but this code will loop through the nested objects. You can highlight/style the nested tables or indicate with either level or something.

http://codepen.io/anon/pen/xEVQZb

JS:

var displayObjectData = function(obj) {   
  for(var key in obj) {
    var value = obj[key];
    if(typeof value == "object") {      
     theHTML += "<tr><td colspan='2'><table>";
     displayObjectData(value);
      theHTML += "</table></td></tr>";
    }
    else {      
      theHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
    }
  }
};
displayObjectData(data);

AJAX jquery returned json data looping key and value

2 Answers2