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

admin管理员组

文章数量:1278983

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.

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.

• javascript
• jquery
• html
• json

Share Improve this question Follow edited Nov 14, 2017 at 18:39 Payden K. Pringle 6111 gold badge22 silver badges1919 bronze badges asked Nov 14, 2017 at 17:41 Unknown UserUnknown User 3,66899 gold badges4444 silver badges8181 bronze badges 4

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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 plicated.

I remend 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 acplish with these loops.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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 JavaScriptStack Overflow