why array is not passing all the values js

Question

I have an array called Contorno

CONTORNO = [{
    tipo: "m",
    x: [0, 0]
  },
  {
    tipo: "l",
    x: [0.06, 0],
    x: [0.06, 0.04],
    x: [0.14, 0.04],
    x: [0.14, 0],
    x: [0.24, 0],
    x: [0.24, 0.04],
    x: [0.34, 0.04],
    x: [0.34, 0],
    x: [0.44, 0],
    x: [0.44, 0.04],
    x: [0.54, 0.04],
    x: [0.54, 0],
    x: [0.64, 0],
    x: [0.64, 0.04],
    x: [0.74, 0.04],
    x: [0.74, 0],
    x: [0.8, 0],
    x: [0.8, 1],
    x: [0.40, 0.55],
    x: [0, 1]
  }

]

and then I call in the function caminho() defined here:

function caminho(c, a) {
  c.beginPath();
 for (var i = 0; i < a.length; i++) {
   if (a[i].tipo === "m") {
    c.moveTo(a[i].x[0], a[i].x[1]);
    }else if (a[i].tipo === "l") {
      c.lineTo(a[i].x[0], a[i].x[1]);
   }
  }

 }

the problem is when I call him

var c = document.getElementById("acanvas").getContext("2d");
caminho(c,CONTORNO);

It is not drawing all the points but just one, I mean it is not passing all points in for loop.

What is the problem?

are functions transform the points but they are not important for here, I wiil remove them. Removed — , May 26 '18 at 20:11
objects `{}` can't have the same property more than once. For example `{a:1, a:2}` becomes `{a:2}` — Slai, May 26 '18 at 20:14
@Slai what do you suggest if i want have the struct above where I have a character and in that character have a lot of coordenates. — , May 26 '18 at 20:16
idk .. array of arrays `x: [[1,2], [3,4]]`, or something easier like SVG path https://stackoverflow.com/questions/9458239/draw-path-in-canvas-with-svg-path-data-svg-paths-to-canvas-paths — Slai, May 26 '18 at 20:23

score 0 · Answer 1 · edited May 26 '18 at 20:18

0

Your object elements have duplicate x keys.

a[i].x[0] appears to be the final x key that you specify, which is [0,1].

You have:

{
  tipo: "l",
  x: [2 d array],
  x: [2 d array]
}

Which isn't really legal.

You probably want:

{
  tipo: "l",
  x: [...a bunch of two dimensional arrays...]
}

edited May 26 '18 at 20:18

Ivan

34,531
8
55
100

answered May 26 '18 at 20:15

ArtHare

1,798
20
22

so I can have like this: {tipo: "l", x:[0,0,1,2...] , where (0,0) and (1,2) are differents coordenates? – May 26 '18 at 20:19
or I put x:[[x,y],[x1,y2]...] instead of [x1,y1,x2,y2..]? – May 26 '18 at 20:21
Your second comment is likely correct. x:[ [0.06, 0.0], [0.06, 0.04] ... ] – ArtHare May 26 '18 at 20:24

Ivan · Accepted Answer · 2018-05-26T20:43:05.330

As others mentioned you can't have duplicate keys in an object. Best way is to restructure your data. For example, use an array containing all the positions.

Here's a code that shows how to select the positions from it, if you want to access all of the positions of typo equal l. Use:

CONTORNO = 
[
  {
    tipo: "m",
    pos: [ [0, 0] ]
  },
  {
    tipo: "l",
    pos: [ [0.06, 0], [0.06, 0.04], [0.14, 0.04], [0.14, 0], [0.24, 0], [0.24, 0.04], [0.34, 0.04], [0.34, 0], [0.44, 0], [0.44, 0.04], [0.54, 0.04], [0.54, 0], [0.64, 0], [0.64, 0.04], [0.74, 0.04], [0.74, 0], [0.8, 0], [0.8, 1], [0.40, 0.55], [0, 1] ]
  }
]

function caminho(c, a) {
  c.beginPath();
  a.forEach(function(value, i) {
    if (value.tipo === "m") {
      c.moveTo(value.pos[i][0], value.pos[i][1]);
    } else if (value.tipo === "l") {
      value.pos.forEach(function(pos, j) {
        c.lineTo(pos[0], pos[1]);
      });
    }
  });
}

The inside .forEach() will loop through the array of positions.

It is incrementing yes, do you want to access all of the positions? or only the first under with typo equal to `l`? — Ivan, May 26 '18 at 20:37
i want to acess all the positions, yes. but is not doing that, just the first position of l. — , May 26 '18 at 20:41

why array is not passing all the values js

2 Answers2