Javascript Object property value from an array

Question

I did some search but I always find how to access the value of an object that is an array, or something like that.

What I want to achieve is to pass values from an array to my object property value.

Let me show you my actual code for better understanding.

//the array i want to use in my object
var grades = [3, 7, 6, 16, 8, 2, 12, 5, 19, 12, 8, 2, 15, 12, 17, 16, 4, 19, 9, 11, 18, 1, 15, 19, 8]

//My rectangle prototype. Some values are changed using the createRectangle() function.
var rectangle = {
        x: Parameters[2], // this is the center of the rectangle
        y: 0,
        dx: 0, // delta x and y are the movement per frame
        dy: 0,
        w: 70, // size
        h: 55,
        color: "yellow",
        text: null,
        textColor: "black",
        cutX: Parameters[2],  //X position of cut mark (same as rectangle)
        cutY: 700,
        dxCut: 0,
        dyCut: 0,
        cutWidth: 75,
        cutHeight: 30,
        cutColor: "#ffffcc",
        cutStroke: "purple",
        strokeHeight: 5,
        draw() { // function to draw this rectangle
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x - this.w / 2, this.y - this.h / 2, this.w, this.h);
            ctx.fillStyle = this.textColor;
            ctx.fillText(this.text, this.x, this.y);
            ctx.fillStyle = this.cutColor;
            ctx.fillRect(this.cutX - this.cutWidth / 2, this.cutY - this.cutHeight / 2, this.cutWidth, this.cutHeight);
            ctx.fillStyle = this.cutStroke;
            ctx.fillRect(this.cutX - this.cutWidth / 2, this.cutY - 8 / 2, this.cutWidth, this.strokeHeight);
        },
        update() { // moves the rectangle
            this.x += this.dx; //x = x + dx  (do we need to update the position ? )
            this.y += this.dy;
            this.cutX += this.dxCut;
            this.cutY += this.dyCut;
        }
    };


//function to create rectangle object
function createRectangle(settings) {
            return Object.assign({}, rectangle, settings);
    }


// function to store rectangles in object array and then spawn rectangle
 function spawnRectangle() {
          if (spawnCountdown) {
              spawnCountdown -= 1;
          } else {
              rectangles.push(
                    createRectangle({
                        y: canvas.height / 1.5,
                        text: function findGrade() {
                                for (var i=0; i<grades.length; i++) {
                                    return this.grades[i];
                                }
                            }, 
                        dx: 2, 
                        dxCut: 2,
                        cutY: randPosition(),
                    })
                );
                spawnCountdown = spawnRate;
            }
    }

So if I explain a bit, in my whole code I have a function that loop through an array to see how many rectangles to create. Then, each time, a rectangle is created using the function spawnRectangle() and push this rectangle to an array of objects.

What I want to do is that each rectangle created from the spawnRectangle() function have its own text property value from my gradesarray.

Note that I printed out my grades array here, but in the actual code, this array is generated from a server-side code (and all those values are updated by ajax).

Answer 1

You can return Object.assign() from createRectangle() and use rectangles array .length to reference index for grades array

function createRectangle(settings) {
  return Object.assign({}, rectangle, settings);
}

rectangles.push(
  createRectangle({
    y: canvas.height / 1.5,
    text: grades[rectangles.length]
    dx: 2, 
    dxCut: 2,
    cutY: randPosition()      
  })
)