How to loop through an array of arrays using jQuery or 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.

because an array does not have an each method.... Arrays have forEach... — epascarello, Nov 14 '17 at 17:44
Something like this works for you? https://stackoverflow.com/questions/7106410/looping-through-arrays-of-arrays — Fede Antuña, Nov 14 '17 at 17:44
If you realy like jQuery, try use `$(Object.keys(this)).each( ... )`. — Arnial, Nov 14 '17 at 17:44
What is that stray `key:` there in the first line? The code defining your object is not valid JavaScript. — JLRishe, Nov 14 '17 at 17:48

score 8 · Accepted Answer · answered Nov 14 '17 at 17:47

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.

score 4 · Answer 2 · answered Nov 14 '17 at 17:52

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>

When I tried passing the `e` to `$.each` it wasn't working. So I switched to `this.each` which didn't work as well. But in your answer it works. +1 — Unknown User, Nov 14 '17 at 17:55

score 3 · Answer 3 · edited Nov 15 '17 at 03:17

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

How to loop through an array of arrays using jQuery or JavaScript?

3 Answers3