Question

I’m trying to build a colors structure that has 3 data per item. For example, red has x and y, blue has x and y, etc. So the 3 pieces of data are color, x, y

What structure do I need to make it easy to read the x and y based on the color. I usually do push(color, x, y) but that wouldn’t work here, because I need to search quickly by the color without needing to loop. What structure do I need here, and how do I set it and get it.

Answer 1

var colors = [
  {color: 'blue',  x: 897, y: 98 },
  {color: 'red', x: 25,  y: 1334 },
  {color: 'yellow', x: 50, y: 12 }
]

for(var i in colors) {
  console.log(colors[i].color);
  console.log(colors[i].x);
  console.log(colors[i].y);
}
// To insert into colors

colors.push({color: 'pink', x: 150, y: 200});

or if you have structure like this

var colors = [
   ['red', 837, 98], 
   ['blue', 25, 144], 
   ['yellow', 50, 12]
];

then

for(var i in colors) {
  console.log(colors[i][0]); // output: red, yellow ...
  console.log(colors[i][1]); // output: 837, 25 ..
  console.log(colors[i][2]); // output: 98, 144 ..
}

and to insert into colors for this structure
colors.push(['pink', 150, 200])

or

var colors = {
  blue: { x: 58, y: 100 },
  red: { x: 43, y: 1334 },
  yellow: {x: 254, y: 12 }
}

then

for(var i in colors) {
  console.log(colors[i].blue.x);
  console.log(colors[i].blue.y);
  // or
  console.log(colors[i]['blue'].x);
  // or like
  console.log(colors[i]['blue']['x']);
}

// and to insert for this sturcture

colors.pink= {x: 150, y: 200};