Issue adding key value pair to javascript object from an array

Question

I have an object like this

let obj = {
    "apple": {
    "color": "red",
  },
  "banana": {
    "color": "yellow"
  }
}

I am getting an array of objects of this form

let arr = [
  {
    "count": "9904",
    "fruit": "apple",
    "type": "typea"
  },
    {
    "count": "7142",
    "fruit": "banana",
    "type": "typeb"
  },
  {
    "count": "4121",
    "fruit": "apple",
    "type": "typec"
  }
]

I want to combine these two so that each item in objcan have variable no of properties so that final output look something like this

{
    "apple": {
    "color": "red",
    "typea": "9904",
    "typec": "4121"
  },
  "banana": {
    "color": "yellow",
    "typeb": "7142"
  }
}

I tried running the array through a for loop but when I try to use the dynamic values in keys it shows error

for (let item of arr){
    obj[item.fruit] = {...obj[item.fruit], item.type: item.count}
}

If instead of item.type I put some static value like "count" it works but I can't figure out how to use dynamic value

Can anyone suggest me what is the best way to accomplish this?

Show us what you've tried first.

djcaesar9114
– djcaesar9114

2020-06-10 22:05:35 +00:00
Commented Jun 10, 2020 at 22:05 — djcaesar9114
– djcaesar9114, Commented Jun 10, 2020 at 22:05
@djcaesar9114 Edited the question to include method I used

Utkarsh Deep
– Utkarsh Deep

2020-06-10 22:10:14 +00:00
Commented Jun 10, 2020 at 22:10 — Utkarsh Deep
– Utkarsh Deep, Commented Jun 10, 2020 at 22:10

Unmitigated · Accepted Answer · 2020-06-10 22:12:36Z

3

You should use computed property names with square brackets.

let obj = {
    "apple": {
    "color": "red",
  },
  "banana": {
    "color": "yellow"
  }
}
let arr = [
  {
    "count": "9904",
    "fruit": "apple",
    "type": "typea"
  },
    {
    "count": "7142",
    "fruit": "banana",
    "type": "typeb"
  },
  {
    "count": "4121",
    "fruit": "apple",
    "type": "typec"
  }
]
for (let item of arr){
    obj[item.fruit] = {...obj[item.fruit], [item.type]: item.count}
}
console.log(obj);

answered Jun 10, 2020 at 22:12

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

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

Comments

Cat · Accepted Answer · 2020-06-10 22:42:05Z

0

Here's a verbose and explicit example of how you can do this using Array.prototype.reduce.
(Note that MDN will be down for maintenance for up to an hour at some point today.)

const
  obj = { apple:{color:"red"}, banana:{color:"yellow"} },
  arr = [
    { fruit: "apple",  type: "typeA", count: 9 },
    { fruit: "banana", type: "typeB", count: 7 },
    { fruit: "apple",  type: "typeC", count: 4 }
  ];
arr.reduce( (theObj, current) => {
  // Reduce loops through the array, updating theObj for each item
  const
    fruitName = current.fruit, // Gets fruit name
    fruitObjInObj = theObj[fruitName], // Gets fruit obj
    type = current.type, // Gets type from current item
    count = current.count; // Gets count from current item
  fruitObjInObj[type] = count; // Adds property to fruit obj
  return theObj; // Gives theObj back to `reduce` for next loop
}, obj); // Tells `reduce` to use obj as theObj on first loop

console.log(obj);

answered Jun 10, 2020 at 22:42

Cat

4,2502 gold badges13 silver badges18 bronze badges

1 Comment

Utkarsh Deep Over a year ago

Thanks. Very elegant. Didn't know reduce can used in this way also

Collectives™ on Stack Overflow

Issue adding key value pair to javascript object from an array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related