Using array of objects in JavaScript

Question

Below code works absolutely fine using JavaScript. I can print cell[5] in other words any specified index value. But I want to print this in a loop but it does not work. Does any one know why it does not work.

$(document).ready(function () {
    var grid_arr = new Array();
    var count = 0;
    var cell;
    cell = {
        x1: 10,
        y1: 10
    };
    alert(cell.x1);
    for (i = 1; i < 10; i++) {
        cell[i] = {
            x1: i * 5,
            y1: i * 2
        };
    }
    alert(cell[5].x1);
});


/* The below for loop does not display any messages: */

for (var j = 0; j < 9; j++) {
    alert(cell[j].x1);
}

Where did you put the second for loop? Outside the $(document).ready? — putvande
– putvande, Commented May 19, 2014 at 8:10
Where are you invoking this loop? If it is outside the ready function, then you simply don't have cells in scope. Other than that, see Array.length and Array.forEach — Sacho
– Sacho, Commented May 19, 2014 at 8:12
@Sacho — The original question had some of the text as a JS comment which wasn't properly indented. Someone edited it to remove the comment markers instead of indenting it. I've just changed that, it seems to make things clearer. — Quentin
– Quentin, Commented May 19, 2014 at 8:15

Cerbrus · Accepted Answer · 2014-05-19 08:19:25Z

1

Running that code throws a TypeError: Cannot read property 'x1' of undefined

This means the cell[j] part of cell[j].x1 is undefined.

Basically, when running:

for (var j = 0; j < 9; j++) {
    alert(cell[j].x1);
}

cell[0] doesn't exist. The reason is that your for loops start counting at different numbers.

Either change that second for loop to start counting at 1, or change the first one:

for (i = 1; i < 10; i++) {
    cell[i] = {

To start counting at 0.

Try to stay consistent in the way you initialize loops. Preferably, always initialize the index as 0, as most counting is zero-based in JS.

edited May 19, 2014 at 8:19

answered May 19, 2014 at 8:11

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

2 Comments

Happy Over a year ago

i think that solves the issues. But does the code cell = { x1: 10, y1: 10 }; not assign it to cell[0] ?

Cerbrus Over a year ago

@Happy: No, it does not. cell = { x1: 10, y1: 10 }; just tells JavaScript to assign the object value of { x1: 10, y1: 10 }; to cell. You'll have cell.x1 === 10, then.

Quentin · Accepted Answer · 2014-05-19 08:10:56Z

0

cell is a variable locally scooped to the anonymous function that you pass to ready.

This means you have two problems:

The variable is not accessible globally
The variable has not been assigned a value until after the ready event fires

Move your final loop inside the anonymous function or move all the code in that function outside it.

Your first loop also starts at 1 while your second starts at 0. This means that (once all the above are sorted) you will be attempting to alert undefined.x1 which will throw an exception.

Either start your loops at the same point, or test to make sure a value is defined before trying to read its properties.

answered May 19, 2014 at 8:10

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Cerbrus · Accepted Answer · 2014-05-19 08:23:35Z

0

Below code is working fine. Please try this.

var grid_arr = new Array(),
    count = 0,
    cell = new Array();
for (i = 1; i < 10; i++) {
    cell.push({
        x1: i * 5,
        y1: i * 2
    });
}
for (var j = 0; j < cell.length; j++) {
    console.log(cell[j].x1);
}

Thanks,

edited May 19, 2014 at 8:23

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

answered May 19, 2014 at 8:23

Rahul Radhakrishnan

8411 gold badge7 silver badges18 bronze badges

1 Comment

Cerbrus Over a year ago

If by "Just fine", you mean "Logs only 90% of the cell's intended contents", you're right. (cell only has 9 properties) The problem in the OP's code is inconsistency in the for loops. That problem still exists in your answer.

user3597525 · Accepted Answer · 2014-05-19 08:27:09Z

0

So many errors in so little code. grid_arr, count is unused. You don't need to use jQuery's document ready function for things that doesn't interact with the DOM. In the first for-loop your index starts from 1, then in your second for loop your index starts from zero. This is how you do it;

for( var cell = [], i = 1; i < 10; i++){
    cell.push({
        x1: i * 5,
        y1: i * 2
    });
    alert( cell[i-1].x1 );
}

answered May 19, 2014 at 8:27

user3597525

693 bronze badges

2 Comments

Happy Over a year ago

@user3597525, Agree those variables does not make any link to the code i have posted here but am using them in rest of my code and also using jquery methods. Also the code you have posted does not work.

user3597525 Over a year ago

Cerbrus, if the first for arr starts from 1, the second one starts from zero, what is 10-1? It does work. Just tested it. prints out 5, 10, 15, 20, 25, 30, 35, 40, 45

Collectives™ on Stack Overflow

Using array of objects in JavaScript

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related