How to loop over an array of objects using javascript?

Question

I'm trying to loop an array that contains objects and I keep getting and error: "Cannot set property 'color' of undefined". What am I doing wrong?

var ObjectTest = function(something1, something2){
    this.Name = something1;
    this.Job = something2;
    this.color = '';
    this.numbers = [];
    
}

var first = new ObjectTest('Paul', 'teacher');
var second = new ObjectTest('Jane', 'doctor');
var third = new ObjectTest('Mike', 'student');

var someArray = [];
someArray.push(first, second, third);
console.log(someArray);


for(var i =0; i <= someArray.length; i++){
    someArray[i].color = 'red';
};

Should be i < someArray.length. If the array has 3 elements, the length is 3 and the indexes are 0, 1, and 2. — Pointy
– Pointy, Commented Oct 10, 2018 at 15:11
First off -- thank you for posting a useful snippet. The answers given below are correct -- but may I suggest that you look into learning your browser's debugging tools. That would have allowed you to step through the loop item by item and see all the variable's and their values. In turn, that would have led you to the solution. — Jeremy J Starcher
– Jeremy J Starcher, Commented Oct 10, 2018 at 15:27

Nina Scholz · Accepted Answer · 2018-10-10 15:11:40Z

1

You need to iterate until the length of the array but not over, because indices are zero based

for (var i = 0; i < someArray.length; i++) {
//                ^

An array returns undefined for a not existing item. undefined has no property to assign a new value.

var ObjectTest = function(something1, something2) {
        this.Name = something1;
        this.Job = something2;
        this.color = '';
        this.numbers = [];
    };

var first = new ObjectTest('Paul', 'teacher');
var second = new ObjectTest('Jane', 'doctor');
var third = new ObjectTest('Mike', 'student');

var someArray = [];
someArray.push(first, second, third);

for (var i = 0; i < someArray.length; i++) {
    someArray[i].color = 'red';
}                                            // no semicolon here

console.log(someArray);

answered Oct 10, 2018 at 15:11

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

khaled_bhar · Accepted Answer · 2018-10-10 15:13:22Z

1

<= was rong

var ObjectTest = function(something1, something2){
    this.Name = something1;
    this.Job = something2;
    this.color = '';
    this.numbers = [];
    
}

var first = new ObjectTest('Paul', 'teacher');
var second = new ObjectTest('Jane', 'doctor');
var third = new ObjectTest('Mike', 'student');

var someArray = [];
someArray.push(first, second, third);


for(var i =0; i < someArray.length; i++){
    someArray[i].color = 'red';
};
console.log(someArray);

answered Oct 10, 2018 at 15:13

khaled_bhar

2571 gold badge4 silver badges21 bronze badges

Comments

Joseph · Accepted Answer · 2018-10-10 15:11:48Z

0

Replace <= to < in your loop.

There's only 3 items on the array, meaning you have indexes 0, 1 and 2. The loop should stop when it arrives at at 3. But since you used <= and not <, i <= 3 when i is 3 is true thus executing the code. The error is caused by someArray[3] not existing.

A safer way to loop through arrays without dealing with indexes is to use array.forEach. It only loops as many times as there are items in the array.

someArray.forEach((object, index) => {
  object.color = 'red'
})

answered Oct 10, 2018 at 15:11

Joseph

120k31 gold badges186 silver badges238 bronze badges

Comments

Elisha Sterngold · Accepted Answer · 2018-10-10 15:36:58Z

0

An easier way to go over an array is to use the forEach. Something like this:

someArray.forEach(data =>  data.color = 'red');

answered Oct 10, 2018 at 15:36

Elisha Sterngold

2,5241 gold badge19 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to loop over an array of objects using javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related