Convert array of objects into an object with only values (no index or keys)

Question

I am trying to comvert an array that has key value pairs into a simple object that only has the data (no keys).

I have an array like this...

[
  0:{pos: 0, color: "#4a55e5"}
  1:{pos: 0.2, color: "#206bcb"}
  2:{pos: 0.4, color: "#edffff"}
  3:{pos: 0.6, color: "#ffaa00"}
  4:{pos: 0.8, color: "#000200"}
  5:{pos: 1, color: "#000764"}
]

I need to convert it so that it is like this...

colorStops = {
    0: "#4a55e5",
    0.2: "#206bcb",
    0.4: "#edffff",
    0.6: "#ffaa00",
    0.8: "#000200",
    1: "#000764"
}

I guess I need to loop through the array and somehow push the values into the object...

colorStops = {};
for(var i=0; i<color.length; i++){
   colorStops[i] = color[i].pos : color[i].color;
}

I only included this to better illustrate what I want. Of course this doesn't work and results in an error.

Possible duplicate of [How to convert an array of key-value tuples into an object](https://stackoverflow.com/questions/32002176/how-to-convert-an-array-of-key-value-tuples-into-an-object) — D. Foley, Dec 03 '17 at 04:22

Hassan Imam · Accepted Answer · 2017-12-03T04:29:37.240

Change this statement colorStops[i] = color[i].pos : color[i].color; to colorStops[color[i].pos] = color[i].color;

var color = [ {pos: 0, color: "#4a55e5"}, {pos: 0.2, color: "#206bcb"}, {pos: 0.4, color: "#edffff"}, {pos: 0.6, color: "#ffaa00"}, {pos: 0.8, color: "#000200"}, {pos: 1, color: "#000764"} ];
colorStops = {};
for(var i=0; i<color.length; i++){
   colorStops[color[i].pos] = color[i].color;
}
console.log(colorStops);

You can use array#reduce and object#destructuring to create your object.

var data = [ {pos: 0, color: "#4a55e5"}, {pos: 0.2, color: "#206bcb"}, {pos: 0.4, color: "#edffff"}, {pos: 0.6, color: "#ffaa00"}, {pos: 0.8, color: "#000200"}, {pos: 1, color: "#000764"} ];
var result = data.reduce((o,{pos, color}) => (o[pos] = color, o), {});
console.log(result);

score 1 · Answer 2 · answered Dec 03 '17 at 04:15

1

This works:

var colorStops = {}

for (var i = 0; i < color.length; i++) colorStops[color[i].pos] = color[i].color

answered Dec 03 '17 at 04:15

hsfzxjy

1,242
4
14
22

score 1 · Answer 3 · answered Dec 03 '17 at 04:16

The syntax for assigning a key-value pair to an object is obj[key] = value. So the updated code should look like below:

var color = [
  {pos: 0, color: "#4a55e5"},
  {pos: 0.2, color: "#206bcb"},
  {pos: 0.4, color: "#edffff"},
  {pos: 0.6, color: "#ffaa00"},
  {pos: 0.8, color: "#000200"},
  {pos: 1, color: "#000764"}
];

var colorStops = {};
for(var i=0; i<color.length; i++){
  let key = color[i].pos;
  let value = color[i].color;
  colorStops[key] = value;
}

console.log(colorStops);

score 1 · Answer 4 · answered Dec 03 '17 at 04:28

You can use reduce like this:

var obj = arr.reduce(function(res, o) {
    res[o.pos] = o.color;
    return res;
}, {});

which can be shortened (using ES6's arrow functions) to:

var obj = arr.reduce((res, o) => (res[o.pos]=o.color, res), {});

Example:

var arr = [
  {pos: 0, color: "#4a55e5"},
  {pos: 0.2, color: "#206bcb"},
  {pos: 0.4, color: "#edffff"},
  {pos: 0.6, color: "#ffaa00"},
  {pos: 0.8, color: "#000200"},
  {pos: 1, color: "#000764"}
];

var obj = arr.reduce((res, o) => (res[o.pos]=o.color, res), {});

console.log(obj);

Kenry Sanchez · Answer 5 · 2017-12-03T04:36:41.623

-1

With an array, map would work fine.

var colorStops = {};

var color = [
  {pos: 0, color: "#4a55e5"},
  {pos: 0.2, color: "#206bcb"},
  {pos: 0.4, color: "#edffff"},
  {pos: 0.6, color: "#ffaa00"},
  {pos: 0.8, color: "#000200"},
  {pos: 1, color: "#000764"}
];

color.map(function(value) {
  colorStops[value.pos] = value.color;
})

As you see, you use bracket notation to create new properties inside the colorStop object.

edited Dec 03 '17 at 04:36

answered Dec 03 '17 at 04:21

Kenry Sanchez

1,703
2
18
24

`map` is a waste (it returns an array that you don't use), use `forEach` – ibrahim mahrir Dec 03 '17 at 04:30

Convert array of objects into an object with only values (no index or keys)

5 Answers5