javascript - jQuery 'each' loop with JSON array

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I'm trying to use jQuery's each loop to go through this JSON and add it to a div named #contentHere . The JSON is as follows:
{ "justIn": [
  { "textId": "123", "text": "Hello", "textType": "Greeting" },
  { "textId": "514", "text":"What's up?", "textType": "Question" },
  { "textId": "122", "text":"Come over here", "textType": "Order" }
 "recent": [
  { "textId": "1255", "text": "Hello", "textType": "Greeting" },
  { "textId": "6564", "text":"What's up?", "textType": "Question" },
  { "textId": "0192", "text":"Come over here", "textType": "Order" }
 "old": [
  { "textId": "5213", "text": "Hello", "textType": "Greeting" },
  { "textId": "9758", "text":"What's up?", "textType": "Question" },
  { "textId": "7655", "text":"Come over here", "textType": "Order" }
I'm getting this JSON through use of this code:
$.get("data.php", function(data){
Any solutions?
$.getJSON("data.php", function(data){
    $.each(data.justIn, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
    $.each(data.recent, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
    $.each(data.old, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
I figured, three separate loops since you'll probably want to treat each dataset differently (justIn, recent, old). If not, you can do:
$.getJSON("data.php", function(data){
    $.each(data, function(k, v) {
        alert(k + ' ' + v);
        $.each(v, function(k1, v1) {
            alert(k1 + ' ' + v1);
                @downvoter - What warranted a downvote? Kindly explain, I would like to know what is amiss.
– karim79
                Jun 13, 2010 at 0:47
                Hi @karim79 How to show a single/specific item array above? is 'Alert(k1 + ' ' + v1[0].TextType)?. I was try but, I got 'not defined' error message
– Bcktr
                Sep 22, 2017 at 8:58
Brief code but full-featured
The following is a hybrid jQuery solution that formats each data "record" into an HTML element and uses the data's properties as HTML attribute values. 
The jquery each runs the inner loop; I needed the regular JavaScript for on the outer loop to be able to grab the property name (instead of value) for display as the heading. According to taste it can be modified for slightly different behaviour.
This is only 5 main lines of code but wrapped onto multiple lines for display:
$.get("data.php", function(data){
    for (var propTitle in data) {
        $('<div></div>') 
            .addClass('heading')
            .insertBefore('#contentHere')
            .text(propTitle);
            $(data[propTitle]).each(function(iRec, oRec) {
                $('<div></div>')
                    .addClass(oRec.textType)
                    .attr('id', 'T'+oRec.textId)
                    .insertBefore('#contentHere')
                    .text(oRec.text);
Produces the output  
(Note: I modified the JSON data text values by prepending a number to ensure I was displaying the proper records in the proper sequence - while "debugging")
<div class="heading">
    justIn
<div id="T123" class="Greeting">
    1Hello
<div id="T514" class="Question">
    1What's up?
<div id="T122" class="Order">
    1Come over here
<div class="heading">
    recent
<div id="T1255" class="Greeting">
    2Hello
<div id="T6564" class="Question">
    2What's up?
<div id="T0192" class="Order">
    2Come over here
<div class="heading">
<div id="T5213" class="Greeting">
    3Hello
<div id="T9758" class="Question">
    3What's up?
<div id="T7655" class="Order">
    3Come over here
<div id="contentHere"></div>
Apply a style sheet
<style>
.heading { font-size: 24px; text-decoration:underline }
.Greeting { color: green; }
.Question { color: blue; }
.Order { color: red; }
</style>
to get a "beautiful" looking set of data
The JSON data was used in the following way:
for each category (key name the array is held under):
the key name is used as the section heading (e.g. justIn)
for each object held inside an array:
'text' becomes the content of a div
'textType' becomes the class of the div (hooked into a style sheet)
'textId' becomes the id of the div
e.g. <div id="T122" class="Order">Come over here</div>
$.get("data.php", function(data){
    var expected = ['justIn', 'recent', 'old'];
    var outString = '';
    $.each(expected, function(i, val){
        var contentArray = data[val];
        outString += '<ul><li><b>' + val + '</b>: ';
        $.each(contentArray, function(i1, val2){
            var textID = val2.textId;
            var text = val2.text;
            var textType = val2.textType;
            outString += '<br />('+textID+') '+'<i>'+text+'</i> '+textType;
        outString += '</li></ul>';
    $('#contentHere').append(outString);
}, 'json');
This produces this output:
<div id="contentHere"><ul>
<li><b>justIn</b>:
(123) <i>Hello</i> Greeting<br>
(514) <i>What's up?</i> Question<br>
(122) <i>Come over here</i> Order</li>
</ul><ul>
<li><b>recent</b>:
(1255) <i>Hello</i> Greeting<br>
(6564) <i>What's up?</i> Question<br>
(0192) <i>Come over here</i> Order</li>
</ul><ul>
<li><b>old</b>:
(5213) <i>Hello</i> Greeting<br>
(9758) <i>What's up?</i> Question<br>
(7655) <i>Come over here</i> Order</li>
</ul></div>
And looks like this:
justIn:
(123) Hello Greeting
(514) What's up? Question
(122) Come over here Order
recent:
(1255) Hello Greeting
(6564) What's up? Question
(0192) Come over here Order
old:
(5213) Hello Greeting
(9758) What's up? Question
(7655) Come over here Order
Also, remember to set the contentType as 'json'
My solutions in one of my own sites, with a table:
$.getJSON("sections/view_numbers_update.php", function(data) {
 $.each(data, function(index, objNumber) {
  $('#tr_' + objNumber.intID).find("td").eq(3).html(objNumber.datLastCalled);
  $('#tr_' + objNumber.intID).find("td").eq(4).html(objNumber.strStatus);
  $('#tr_' + objNumber.intID).find("td").eq(5).html(objNumber.intDuration);
  $('#tr_' + objNumber.intID).find("td").eq(6).html(objNumber.blnWasHuman);
sections/view_numbers_update.php Returns something like:
[{"intID":"19","datLastCalled":"Thu, 10 Jan 13 08:52:20 +0000","strStatus":"Completed","intDuration":"0:04 secs","blnWasHuman":"Yes","datModified":1357807940},
{"intID":"22","datLastCalled":"Thu, 10 Jan 13 08:54:43 +0000","strStatus":"Completed","intDuration":"0:00 secs","blnWasHuman":"Yes","datModified":1357808079}]
HTML table:
<table id="table_numbers">
  <th>[...]</th>
  <th>[...]</th>
  <th>[...]</th>
  <th>Last Call</th>
  <th>Status</th>
  <th>Duration</th>
  <th>Human?</th>
  <th>[...]</th>
 <tr id="tr_123456">
  [...]
</table>
This essentially gives every row a unique id preceding with 'tr_' to allow for other numbered element ids, at server script time. The jQuery script then just gets this TR_[id] element, and fills the correct indexed cell with the json return.
The advantage is you could get the complete array from the DB, and either foreach($array as $record) to create the table html, OR (if there is an update request) you can die(json_encode($array)) before displaying the table, all in the same page, but same display code.
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.