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\": \"[email protected]\", \"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 stackoverflow.com/questions/7861032/… — user2894296
– user2894296, Commented Sep 15, 2016 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
– Leigh, Commented Sep 15, 2016 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() . Get rid of the array, and your original code would have worked just fine. — Leigh
– Leigh, Commented Sep 15, 2016 at 21:07

Kara · Accepted Answer · 2016-09-16 22:34:36Z

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, 2016 at 22:34

Kara

6,23616 gold badges54 silver badges58 bronze badges

answered Sep 15, 2016 at 15:48

semone

1716 bronze badges

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

1 Comment

StealthRT Over a year ago

Great job, semone! That did it! And welcome to Stackoverflow!

Web pundit · Accepted Answer · 2016-09-15 16:44:24Z

1

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

answered Sep 15, 2016 at 16:44

Web pundit

4983 silver badges10 bronze badges

Collectives™ on Stack Overflow

AJAX jquery returned json data looping key and value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related