如何使用jQuery或JavaScript遍历数组数组？

Question

I have a json array like this

var data = key: [
    {
        arr1: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    },
    {
        arr2: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    },
    {
        arr3: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    }
]

I wanted to loop through key which is 3 times, and inside the key loop I wanted loop again through each of the elements inside key .

First I tried $.each which works fine for key array. And inside the each function I tried to get the key values using Object.key(this) inside the loop which returned me the names

arr1, arr2, arr3

But I'm not able to loop through the names I got.

$.each(data, function(i, e) {
    Object.keys(this).each(function(index, element) {
        console.log(element);
    })    
})

I don't know if this is the right way of doing it, when I tried doing it this was. I got an error telling .each is not a function.

Any help will be much appreciated.

Answer 1

The simple way to do this would be to use three loops, but trying to make that work with this taking on a new meaning in each loop would be unnecessarily complicated.

I recommend using .forEach and giving a clear name to each loop variable:

 var data = [ { arr1: [ {value: 1}, {value: 2}, {value: 3}, ] }, { arr2: [ {value: 1}, {value: 2}, {value: 3}, ] }, { arr3: [ {value: 1}, {value: 2}, {value: 3}, ] } ] data.forEach(function (outerObj) { Object.keys(outerObj).forEach(function (key) { outerObj[key].forEach(function (item) { console.log(item); }); }); }); 

Of course, there may be a better solution if you would actually tell us what you wanted to accomplish with these loops.

Answer 2

If you want to keep with the jQuery pattern, then just keep using each for each nested level:

 var data = [{arr1: [{value: 1}, {value: 2}, {value: 3}]}, {arr2: [{value: 1}, {value: 2}, {value: 3}]}, {arr3: [{value: 1}, {value: 2}, {value: 3}]}]; $.each(data, function(i, e) { $.each(e, function(key, arr) { console.log(key); $.each(arr, function(index, obj) { console.log("...", index, obj.value); }); }); }) 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

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

Answer 3

I believe the reason your attempt is not working is because you are trying to .each the individual values themselves, rather than the arrays within data .

This should work:

$.each(data, function(index, array) { // This each iterates over the arrays.
  $.each(array, function(subindex, value) { // This each iterates over the individual values.
    console.log(value); // Logs the individual values.
  });
});