How to loop over an array of arrays using jQuery?

Question

I have an array of arrays. I want to be able to loop over each array and for every array I want to add new keys or update existing values.

Here is what I have

    var values = [];

    values['123'] = [];
    values['456'] = [];
    values['123']['x1'] = 'value 1';
    values['123']['x2'] = 'value 2';

I want to loop over the values array, and add new keys to the array for each array. (I.e values['123'] and values['456'])

Here is what I tried

$.each(values, function(index, value){

  value['x1'] = 'new value 1';
  value['x10'] = 'new value 10';
  value['x20'] = 'new value 20';
  console.log(value);

});

The console shows this error

TypeError: value is undefined

Here is a fiddle

How can I correcly loop over each array item and update the original array?

isvforall · Accepted Answer · 2016-03-08 10:17:21Z

1

Actually for your case you need to use Object, not Array

For constructing non-numeric indexes you should use {}

{} - for constructing Object, [] - for constructing Array

jQuery.each() can be used to iterate over both objects and arrays.

Try this code

$(function() {
    $('#x').click(function(e) {
        var values = {}; // here

        values['123'] = {}; // here
        values['456'] = {}; // here
        values['123']['x1'] = 'value1';
        values['123']['x2'] = 'value2';


        $.each(values, function(index, value) {

            value['x1'] = 'new value 1';
            value['x10'] = 'new value 10';
            value['x20'] = 'new value 20';
            console.log(value);

        });
    });
});

edited Mar 8, 2016 at 10:17

answered Mar 7, 2016 at 23:26

isvforall

8,9166 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Junior Over a year ago

That worked! Can you please tell me what is the difference between {} and [] ?

Shekhar Chikara Over a year ago

@MikeA Here, values is being initialised as an object (see the {}) rather than an array. $.each() function treats 123 & 456 as keys in case of object, however, in case of array it treats them as indexes. Thats why I added the values[index]!== undefined condition in my code below.

Junior Over a year ago

Thank you very much for your help

isvforall Over a year ago

@MikeA I've added some links and info

Shekhar Chikara · Accepted Answer · 2016-03-07 23:42:12Z

0

This is happening because your values array is getting initialized with indexes 123 and 456. So, the $.each() function assumes the array length to be 457 and thus starts from element index 0, though there is no value at that index.

In order to overcome this, you can simply make the following change and it will work-

$.each(values, function(index, value){
    if(values[index] !== undefined) { 
        value['x1'] = 'new value 1';
        value['x10'] = 'new value 10';
        value['x20'] = 'new value 20';

        //Update the new values in the values object.
        values[index] = value;
        console.log(value);
    }
});

edited Mar 7, 2016 at 23:42

answered Mar 7, 2016 at 23:35

Shekhar Chikara

3,8322 gold badges32 silver badges53 bronze badges

3 Comments

Junior Over a year ago

That removed the error but values is now empty and it should not.

Shekhar Chikara Over a year ago

Check my updated answer. The values object was not getting updated with the latest values earlier. It should work as required now.

Shekhar Chikara Over a year ago

As per your question, since you asked how to loop an array of arrays, this should be the answer. Since here, I didn't make any changes in your array structure. The current accepted answer makes a change in the underlying structure by simply changing the main array into object.

Collectives™ on Stack Overflow

How to loop over an array of arrays using jQuery?

2 Answers 2

4 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Related