Javascript: dynamically creating and accessing an array of objects

Question

I am having no luck creating and accessing an array of objects. I'm trying to draw 10 random rectangles on a canvas and store their X,Y, Width and Height in an array to access later.

var square =  {cX : 0,  cY : 0,  W : 200,  H : 100}
var squares = [];  
var squaresToMake = 10;

for ( var loopy = 0; loopy < squaresToMake; loopy++ ) {
 square.cX = Math.floor(Math.random() * 20);
 square.cY = Math.floor(Math.random() * 20);
 square.W = Math.floor(Math.random() * 200);
 square.H = Math.floor(Math.random() * 50);
 squares.push(square);
}

var arrayLength = squares.length;
for (var loopy = 0; loopy < arrayLength; loopy++) {
 ctx.rect(squares[loopy].cX, squares[loopy].cY, squares[loopy].W, squares[loopy].H);
 ctx.fill();
}

The result I'm getting is the squares array is full of 10 objects that all have the same values: the last values that were generated from loop that assigns random numbers. Please advise me what I'm doing wrong! Thank you

epx · Accepted Answer · 2018-08-05 00:38:00Z

1

You are pushing the same object (square) ten times, because objects are stored/passed by reference. Every time you put new values into 'square' you are just updating the same object. Move "var square" into the loop, so you create a new square each cycle.

answered Aug 5, 2018 at 0:38

epx

1,0949 silver badges19 bronze badges

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

Comments

printfmyname · Accepted Answer · 2018-08-05 00:40:20Z

You are pushing the same object to the array. Bring the square object inside the for loop so that new one get created on each iteration. Currently, you will only see the 10 elements that points to same reference, which contains an square object with lastly added values.

var squares = [];  
var squaresToMake = 10;

for ( var loopy = 0; loopy < squaresToMake; loopy++ ) {
 var square =  {cX : 0,  cY : 0,  W : 200,  H : 100}
 square.cX = Math.floor(Math.random() * 20);
 square.cY = Math.floor(Math.random() * 20);
 square.W = Math.floor(Math.random() * 200);
 square.H = Math.floor(Math.random() * 50);
 squares.push(square);
}

var arrayLength = squares.length;
for (var loopy = 0; loopy < arrayLength; loopy++) {
 ctx.rect(squares[loopy].cX, squares[loopy].cY, squares[loopy].W, squares[loopy].H);
 ctx.fill();
}

D. Seah · Accepted Answer · 2018-08-05 02:34:14Z

1

your requirements can be met like this. sometimes, not defining extra variables make the code less error prone.

var squares = [];
var squaresToMake = 10;

for (var i = 0; i < squaresToMake; i++) {
  squares.push({
    cX: Math.floor(Math.random() * 20),
    cY: Math.floor(Math.random() * 20),
    W: Math.floor(Math.random() * 200),
    H: Math.floor(Math.random() * 50)
  });
}

squares.forEach(function(sq) {
  ctx.rect(sq.cX, sq.cY, sq.W, sq.H);
  ctx.fill();
});

answered Aug 5, 2018 at 2:34

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Comments

Akrion · Accepted Answer · 2018-08-05 07:26:18Z

0

Here is a slightly more ES6 approach for the generation of the values:

var squares = [];  
var keys = ['cX', 'cY', 'W', 'H']
var squaresToMake = 10;

const newValue = () => Math.floor(Math.random() * new Date().getMilliseconds())
const newSquare = () => keys.reduce((r,c) => Object.assign({[c]: newValue() }, r), {})

Array.from(new Array(squaresToMake), (x) => squares.push(newSquare()) )
console.log(squares)

edited Aug 5, 2018 at 7:26

answered Aug 5, 2018 at 7:07

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

Collectives™ on Stack Overflow

Javascript: dynamically creating and accessing an array of objects

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

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

Related