How to iterate over javascript object to make the code better-CodePudding

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);
    }

CodePudding user response：

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);
 }

CodePudding user response：

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

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

}

CodePudding user response：

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)
  });
}

CodePudding user response：

You could do this using Destructuring Assignment like this:

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

Alternatively, if the objects are always ordered and only consist of x, y, width and height keys, you could do something like this instead using Object.values:

function renderplat() {
  ctx.fillStyle = "#45597E";
  platforms.forEach(o => ctx.fillRect(...Object.values(o)));
}