Mapping array to array of objects

Question

I got an array of objects like this:

const defaultActors = 
[
  {
   data: {name: "name1"}
  },
  {
   data: {name: "name2"}
  }
]

and a simple array like this:

   const actorsToBeAdded = ["nameX", "nameY"]

Is there an easy way to get this:

 const combinedActors =  [
      {
       data: {name: "name1"}
      },
      {
       data: {name: "name2"}
      },
      {
       data: {name: "nameX"} //newly added
      },
      {
       data: {name: "nameY"} //newly added
      }
    ]

I'm using useState and trying to get combined array of objects like this:

    setCombinedActors(
    actorsToBeAdded.map((actor) => 
      ({
        data: {name : actor} //data from [nameX, nameY] array
        //also need to spread data from {name: "name1" ...} array
       })
     )
   )

EDIT: thanks for answers. Concat does result in one array but it's array of both "direct" values and objects, like this

["name1", "name2", {Object_with_data},{Object_with_data}]

is there a way to get

[{Object_with_data},{Object_with_data}, {Object_with_data},{Object_with_data}]

or this

["name1", "name2", "name3", "name4"]

? I created sandbox: https://codesandbox.io/s/epic-taussig-zeyev?file=/src/App.js

Thanks to anyone interested!

chriptus13 · Accepted Answer · 2021-01-14 01:03:07Z

1

You can just concat both arrays using Array.prototype.concat like:

setCombinedActors(
    defaultActors.concat(
        actorsToBeAdded.map(actor => ({ data: { name : actor } }))
    )    
)

Also you may want to add only the actors that are still not in the defaultActors array, for that you can use a filter like:

setCombinedActors(
    defaultActors.concat(
        actorsToBeAdded
            .filter(actor => !defaultActors.some(({ data }) => data.name === actor))
            .map(actor => ({ data: { name : actor } }))
    )    
)

Answering the edit, if you want to conver all to String's.

arr.map(elm => typeof elm === 'string' ? elm : elm.data.name)

Otherwise, if you want objects.

arr.map(elm => typeof elm === 'string' ? { data: { name: elm } } : elm)

Note: Assuming all elements of the array are either a String or an object with the structure { data: { name: 'a string' } }.

edited Jan 14, 2021 at 1:03

answered Jan 13, 2021 at 4:30

chriptus13

7158 silver badges23 bronze badges

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

2 Comments

chriptus13 Over a year ago

So you have an array with either objects or strings and you want to make it only strings or objects right?

chriptus13 Over a year ago

Check edit to see if that was it. Just a reminder don't post multiple questions in a single post.

Rishabh Natarajan · Accepted Answer · 2021-01-13 04:22:34Z

0

actorsToBeAdded.forEach(value=>{
defaultActors.push(
              {data:{name:value}},
              );
}
)

Try this out.

answered Jan 13, 2021 at 4:22

Rishabh Natarajan

356 bronze badges

Collectives™ on Stack Overflow

Mapping array to array of objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related