CODEWITHSUNDEEP
javascriptjqueryhtmljson
Unknown User
Unknown User

Reputation: 3658

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

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.

Upvotes: 0

Views: 8197

Answers (3)

Payden K. Pringle
Payden K. Pringle

Reputation: 61

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

Upvotes: 3

trincot
trincot

Reputation: 350137

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>

Upvotes: 4

JLRishe
JLRishe

Reputation: 101662

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.

Upvotes: 8

Related Questions