How do you make a change to one array, based on another array, otherwise add to the end of the the first array?

Question

I have 2 arrays of data. I want to be able to "loop" through the first array, adding each item to a new "final array" in the same order, but for each item it checks, if it has the same ID as one of the items from a second array, then I want it to NOT add that item from the first array to the final array, but instead want it to add that matching ID item from the second array instead in its place.

If there are no items from the first array that match the item from the second array, that second array item will instead get added to the bottom of the final array.

Example:

// array 1
  const mainArray = [
    {name: 'example1', id: 1}, 
    {name: 'example2', id: 2}, 
    {name: 'example3', id: 3}, 
    {name: 'example4', id: 4}, 
    {name: 'example5', id: 5},
  ]
  // array 2
  const uploadArray = [
    {name: 'floop', id: 2}, 
    {name: 'example10', id: 10}
  ]
// adds all items from mainArray to finalArray, but since floop also had an id of 2, 
//it got added in place of example2, since example10 didn't match any items in mainArray, 
// it was added to finalArray after all of mainArray was added to finalArray
  finalArray = [
    {name: 'example1', id: 1}, 
    {name: 'floop', id: 2}, 
    {name: 'example3', id: 3}, 
    {name: 'example4', id: 4}, 
    {name: 'example5', id: 5},
    {name: 'example10', id: 10}
  ]

What conditional have you tried to add to make this work? Have you attempted any code to achieve your goal array? Please include that code along with your question. — dale landry
– dale landry, Commented Oct 12, 2020 at 18:52

Derek Wang · Accepted Answer · 2020-10-12 20:41:42Z

1

Using Array.map, you can update the first array based on the second array and after that, get the output by binding two arrays (updated first array and second array).

const mainArray = [
  {
    name: 'example1',
    id: 1
  },
  {
    name: 'example2',
    id: 2
  },
  {
    name: 'example3',
    id: 3
  },
  {
    name: 'example4',
    id: 4
  },
  {
    name: 'example5',
    id: 5
  },
]

const uploadArray = [
  {
    name: 'floop',
    id: 2
  },
  {
    name: 'example10',
    id: 10
  }
];

const replacedMainArray = mainArray.map(item => {
  const existed = uploadArray.findIndex(({ id }) => item.id === id);
  if (existed >= 0) {
    const updatedItem = { ...uploadArray[existed] };
    uploadArray.splice(existed, 1);
    return updatedItem;
  }
  return item;
});

const result = [ ...replacedMainArray, ...uploadArray ];
console.log(result);

edited Oct 12, 2020 at 20:41

answered Oct 12, 2020 at 18:56

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

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

6 Comments

J64 Over a year ago

This does work with the example provided, but what about objects with a variable amount of properties? Would it still be able to completely replace the object?

Derek Wang Over a year ago

For the same id, you want to replace the second item with first item? (all keys)

J64 Over a year ago

If the ids are the same the matching id object in the second array will replace the matching id object in the first array entirely. I just used name and and id for example but it would have more properties in each object than just id and name.

Derek Wang Over a year ago

I have updated my answer. @J64 Check Array.map callback. const updatedItem = { ...uploadArray[existed] } will work.

J64 Over a year ago

Seems to work in the appropriate way from what I can tell.

|

Collectives™ on Stack Overflow

How do you make a change to one array, based on another array, otherwise add to the end of the the first array?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related