Add value to inner array using map in JavaScript

Question

Suppose I have the following array:

let array = [
  {
    id: "1",
    name: "name",
    categories: [
      {
        subid: "10",
        name: "name",
      },
      {
        subid: "11",
        name: "name",
      }
    ]
  },
  {
    id: "2",
    name: "name",
    categories: [
      {
        subid: "20",
        name: "name",
      },
      {
        subid: "21",
        name: "name",
      }
    ]
  }
]

My goal is to take the id of each of the objects and add it to the inner array categories. So it would look like this:

let array = [
  {
    id: "1",
    name: "name",
    categories: [
      {
        subid: "10",
        name: "name",
        id: "1"
      },
      {
        subid: "11",
        name: "name",
        id: "1"
      }
    ]
  },
  {
    id: "2",
    name: "name",
    categories: [
      {
        subid: "20",
        name: "name",
        id: "2"
      },
      {
        subid: "21",
        name: "name",
        id: "2"
      }
    ]
  }
]

Here is what I have so far:

array.map(x => (x.id)) // returns new array of ids
// add these into the categories

How can I do this using map? If map can't be used I think for each will work as well.

do you want to mutate the original data or get independent new objects? — Nina Scholz
– Nina Scholz, Commented Sep 28, 2018 at 8:04

Nenad Vracar · Accepted Answer · 2018-09-28 08:06:08Z

2

With map method and spread syntax inside object you could do this.

let array = [{"id":"1","name":"name","categories":[{"subid":"10","name":"name"},{"subid":"11","name":"name"}]},{"id":"2","name":"name","categories":[{"subid":"20","name":"name"},{"subid":"21","name":"name"}]}]

let result = array.map(({id, categories, ...rest}) => ({
  ...rest, id, categories: categories.map((o) => ({...o, id}))
}))

console.log(result)

answered Sep 28, 2018 at 8:06

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

Comments

amrender singh · Accepted Answer · 2018-09-28 08:06:51Z

2

You can use Array.forEach() to iterate over the array and then use Array.map() on categories array to add the id prop to all its objects:

let array = [ { id: "1", name: "name", categories: [ { subid: "10", name: "name", }, { subid: "11", name: "name", } ] }, { id: "2", name: "name", categories: [ { subid: "20", name: "name", }, { subid: "21", name: "name", } ] } ];
array.forEach((o)=>{
  o.categories = o.categories.map(cat=>Object.assign({},cat,{id : o.id}));
});
console.log(array);

answered Sep 28, 2018 at 8:06

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

2 Comments

KarelG Over a year ago

that is a much cleaner approach than the other (Nenad's) answer. But OP just commented that he wants a new object from the data. Maybe you can adapt it accordingly.

amrender singh Over a year ago

@KarelG Thank you :-)

Allloush · Accepted Answer · 2018-09-28 08:23:13Z

2

What about nested map?

let arr = [
  {
    id: "1",
    name: "name",
    categories: [
      {
        subid: "10",
        name: "name",
      },
      {
        subid: "11",
        name: "name",
      }
    ]
  },
  {
    id: "2",
    name: "name",
    categories: [
      {
        subid: "20",
        name: "name",
      },
      {
        subid: "21",
        name: "name",
      }
    ]
  }
]

arr.map(x=>{
    x.categories.map(y => { 
        y.id = x.id
    })
})

console.log(arr)

answered Sep 28, 2018 at 8:23

Allloush

1,1688 silver badges29 bronze badges

1 Comment

Roko C. Buljan Over a year ago

This will modify the original Array.

Nina Scholz · Accepted Answer · 2018-09-28 08:13:39Z

1

You need to map all arrays with copied properties to get a new independent data with a new property.

let array = [{ id: "1", name: "name", categories: [{ subid: "10", name: "name", }, { subid: "11", name: "name", }] }, { id: "2", name: "name", categories: [{ subid: "20", name: "name", }, { subid: "21", name: "name", }] }],
    updated = array.map(o => Object.assign(
        {},
        o,
        { categories: o.categories.map(p => Object.assign({}, p, { id: o.id })) }
    ));

console.log(updated);
console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Sep 28, 2018 at 8:13

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

cup_of Over a year ago

yes! this is what im looking for. thank you so much.

Akshay Shettar · Accepted Answer · 2018-09-28 08:16:01Z

1

Using each of Jquery should do the job. $.each(array,function(index,item){item.categories.id = item.id;}); Thanks.

answered Sep 28, 2018 at 8:16

Akshay Shettar

112 bronze badges

Collectives™ on Stack Overflow

Add value to inner array using map in JavaScript

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related