jQuery nested .each loop over JSON success

Question

Referencing this post jQuery loop over JSON result from AJAX Success?

JSON being returned (as seen in Firebug):

[
   {"NUMBER":"N02939667","BARCODE":"B000615994","LOAD_FK":"7813","CRO":"VONS"},
   {"NUMBER":"N02939667","BARCODE":"B000607696","LOAD_FK":"8875","CRO":"VONS"}
]

My AJAX with the nested .each functions:

$.ajax({
        type: "POST",
        url: "get_shipment_by_nnumber.php",
        data: searchItemDataString,
        dataType: 'json',
        success: function(g){
            if ($.isEmptyObject(g[0].LOAD_FK)){
                //validate json returned
            }else{
                  $('.BGresults').empty();
                  $.each(g, function() {
                      $.each(this, function(k, v) {
                          var result = '<strong>     ' + searchItem + ':  (' + v.BARCODE + ') (Reg ID = ' + v.LOAD_FK + ')  (' + v.CRO + ')</strong><br>';
                          $('.BGresults').append(result);
                      });
                  });                   
             };
         }
    })

My output is iterating over each k/v pair and not finding the value. I'm guessing because I have two objects each with 5 k/v pairs that I get get 10 outputs. I've looked at similar posts on s.o. but I'm just not seeing the answer that makes sense to me. Can someone point out my mistakes. Thanks.

N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)
N02939667.1-1: (undefined) (Reg ID = undefined) (undefined)

The `v` in your second each is the value and not an object. Your second `$.each()` is looping over the object that was passed in. So the values of `k` and `v` would be `k = "NUMBER", v = "N02939667" then k = "BARCODE", v = "B000615994", etc...` — Ballbin, Jun 20 '14 at 18:02

score 2 · Answer 1 · answered Jun 20 '14 at 17:59

var data = [
   {"NUMBER":"N02939667","BARCODE":"B000615994","LOAD_FK":"7813","CRO":"VONS"},
   {"NUMBER":"N02939667","BARCODE":"B000607696","LOAD_FK":"8875","CRO":"VONS"}
];

$.each(data, function() { 
    var output = [];

    $.each(this, function(k, v) {
       output.push(k, v);
    });

    console.log(output.join(' '));

});

Rooster · Accepted Answer · 2014-06-20T20:07:21.467

for your current code to work, you need to reference the $(this) in your second nested loop instead of this. Also, you'll notice in my fiddle I hardcoded the value of searchItem as you didn't provide it in your example.

fiddle with simulated data

$.ajax({
        type: "POST",
        url: "get_shipment_by_nnumber.php",
        data: searchItemDataString,
        dataType: 'json',
        success: function(g){
            if ($.isEmptyObject(g[0].LOAD_FK)){
                //validate json returned
            }else{
                  $('.BGresults').empty();
                  $.each(g, function() {
                      $.each($(this), function(k, v) {
                          var result = '<strong>     ' + searchItem + ':  (' + v.BARCODE + ') (Reg ID = ' + v.LOAD_FK + ')  (' + v.CRO + ')</strong><br>';
                          $('.BGresults').append(result);
                      });
                  });                   
             };
         }
    })

I just looked up this VS $(this), makes more sense to me now. — Rolo Tomassi, Jun 20 '14 at 20:03

score 1 · Answer 3 · answered Jun 20 '14 at 18:26

Consider this Example:

data = [
       {"NUMBER":"N02939667","BARCODE":"B000615994","LOAD_FK":"7813","CRO":"VONS"},
       {"NUMBER":"N02939667","BARCODE":"B000607696","LOAD_FK":"8875","CRO":"VONS"}
       ]

//for each value in data => this ("this" is a variable containing an element of data)
$.each(data, function(){   //in this function you can access "this", and element of data
    $.each(this, function(k,v){  //inner loop iterated over the key-value pairs of "this"
        console.log(k +"==="+v);
        })
});

this outputs:

NUMBER===N02939667 
BARCODE===B000615994 
LOAD_FK===7813 
CRO===VONS 
NUMBER===N02939667 
BARCODE===B000607696 
LOAD_FK===8875 
CRO===VONS

That is k takes the value of each key in the JSON object, and v takes the corresponding value. What you actually seem want to do is get a specific value from the JSON object and stick it in some HTML. Do that like so:

$.each(data, function(){  
    var result = '<strong>     ' + searchItem + ':  (' + this.BARCODE + ') (Reg ID = ' + this.LOAD_FK + ')  (' + this.CRO + ')</strong><br>';
    $('.BGresults').append(result);
});

use this.key to access the given value for that key in the JSON object.

I'm glad you posted using this with one .each to contrast with @rooster answer. Both ways worked and made it easier for me to see the difference. — Rolo Tomassi, Jun 20 '14 at 20:08

jQuery nested .each loop over JSON success

3 Answers3