How to iterate over javascript object to make the code better

Question

At the moment I have this code. the function renderplat is repeating the same code for each platform coordinate, how can I iterate over the object lenght to make it a bit more automatic?


platforms=[{"x":0,"y":570,"width":1000,"height":25},{"x":350,"y":100,"width":250,"height":25},{"x":750,"y":60,"width":150,"height":25},{"x":0,"y":60,"width":150,"height":25},{"x":0,"y":390,"width":90,"height":25},{"x":100,"y":440,"width":90,"height":25},{"x":200,"y":490,"width":90,"height":25},{"x":800,"y":390,"width":90,"height":25},{"x":710,"y":440,"width":90,"height":25},{"x":620,"y":490,"width":90,"height":25},{"x":392,"y":262,"width":90,"height":25},{"x":414,"y":201,"width":90,"height":25},{"x":133,"y":210,"width":90,"height":25}]

function renderplat(){
        ctx.fillStyle = "#45597E";
                
        ctx.fillRect(platforms[0].x, platforms[0].y, platforms[0].width, platforms[0].height);
        ctx.fillRect(platforms[1].x, platforms[1].y, platforms[1].width,platforms[1]. height);
        ctx.fillRect(platforms[2].x, platforms[2].y, platforms[2].width,platforms[2]. height);
        ctx.fillRect(platforms[3].x, platforms[3].y, platforms[3].width,platforms[3]. height);
    }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach `platforms.forEach(el => ctx.fillRect(el.x, el.y, el.width, el.height));` — WOUNDEDStevenJones, Sep 23 '21 at 19:44

score 0 · Answer 1 · answered Sep 23 '21 at 19:45

By using the forEach-method for example:

const platforms=[{"x":0,"y":570,"width":1000,"height":25},{"x":350,"y":100,"width":250,"height":25},{"x":750,"y":60,"width":150,"height":25},{"x":0,"y":60,"width":150,"height":25},{"x":0,"y":390,"width":90,"height":25},{"x":100,"y":440,"width":90,"height":25},{"x":200,"y":490,"width":90,"height":25},{"x":800,"y":390,"width":90,"height":25},{"x":710,"y":440,"width":90,"height":25},{"x":620,"y":490,"width":90,"height":25},{"x":392,"y":262,"width":90,"height":25},{"x":414,"y":201,"width":90,"height":25},{"x":133,"y":210,"width":90,"height":25}]
   
   
function renderplat(){
     ctx.fillStyle = "#45597E";
     platforms.forEach(p => ctx.fillRect(p.x, p.y, p.width, p.height);
 }

score 0 · Answer 2 · answered Sep 23 '21 at 19:48

0

for(let i=0; i<platforms.length; i++){

    ctx.fillRect(platforms[i].x, platforms[i].y, platforms[i].width, platforms[i].height);

}

answered Sep 23 '21 at 19:48

akicsike

371
2
8

score 0 · Answer 3 · answered Sep 23 '21 at 19:48

There are various ways to do it, personally, I would recommend using forEach. You can learn more about it here.

So your code becomes

platforms=[{"x":0,"y":570,"width":1000,"height":25},{"x":350,"y":100,"width":250,"height":25},{"x":750,"y":60,"width":150,"height":25},{"x":0,"y":60,"width":150,"height":25},{"x":0,"y":390,"width":90,"height":25},{"x":100,"y":440,"width":90,"height":25},{"x":200,"y":490,"width":90,"height":25},{"x":800,"y":390,"width":90,"height":25},{"x":710,"y":440,"width":90,"height":25},{"x":620,"y":490,"width":90,"height":25},{"x":392,"y":262,"width":90,"height":25},{"x":414,"y":201,"width":90,"height":25},{"x":133,"y":210,"width":90,"height":25}]

function renderplat(){
  ctx.fillStyle = "#45597E";
  platforms.forEach(platform => {
    ctx.fillRect(platform.x, platform.y, platform.width, platform.height)
  });
}

How to iterate over javascript object to make the code better

3 Answers3