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 — D. Foley
– D. Foley, Commented Dec 3, 2017 at 4:22

Hassan Imam · Accepted Answer · 2017-12-03 04:29:37Z

3

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

edited Dec 3, 2017 at 4:29

answered Dec 3, 2017 at 4:17

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hsfzxjy · Accepted Answer · 2017-12-03 04:15:54Z

1

This works:

var colorStops = {}

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

answered Dec 3, 2017 at 4:15

hsfzxjy

1,3224 gold badges14 silver badges22 bronze badges

Comments

Nisarg Shah · Accepted Answer · 2017-12-03 04:16:32Z

1

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

answered Dec 3, 2017 at 4:16

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Comments

ibrahim mahrir · Accepted Answer · 2017-12-03 04:28:32Z

1

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

answered Dec 3, 2017 at 4:28

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

Kenry Sanchez · Accepted Answer · 2017-12-03 04:36:41Z

-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 3, 2017 at 4:36

answered Dec 3, 2017 at 4:21

Kenry Sanchez

1,7432 gold badges19 silver badges24 bronze badges

1 Comment

ibrahim mahrir Over a year ago

map is a waste (it returns an array that you don't use), use forEach

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related