replace objects in array from another array

Question

I'm trying to replace object(s) in an array from another array while keeping the index/order in place.

So arrayOne:

[
    {
        "color": "#f8edd1",
        "selected": true
    },
    {
        "color": "#d88a8a",
        "selected": false
    },
    {
        "color": "#474843",
        "selected": false
    },
    {
        "color": "#9d9d93",
        "selected": true
    },
    {
        "color": "#c5cfc6",
        "selected": false
    }
]

arrayTwo:

[
    "#1c2130",
    "#028f76",
    "#b3e099",
    "#ffeaad",
    "#d14334"
]

my desired new array would be:

[
    "#f8edd1",
    "#028f76",
    "#b3e099",
    "#9d9d93",
    "#d14334"
]

So the selected color(s), would still be in the same index/position in the array. The desired array can be a completely new array or updated arrayOne or Two. The main issue I ran into was mapping it when there was more than 1 object with the selected: true.

This was my first stab at it:

  const selectedColors = arrayOne.filter(function (obj) {
    return obj.selected === true
  })
  if (selectedColors) {
    const lockedIndex = arrayOne.findIndex((obj) => {
      if (obj.color === selectedColors[0].color) {
        return true
      }
    })
    const newColors = arrayTwo.splice(lockedIndex, 1, selectedColors[0].color)
    console.log(newColors)
  }

Also note that arrayOne is actually a React useState, but i'm not looking to update the useState, I'm doing something else with the newColors - but if it's easier to create a seperate useState to execute what i'm trying to do, that's fine.

Adassko · Accepted Answer · 2022-08-20 03:01:56Z

3

You can probably just use .map function on arrayTwo and use second argument which is an index. Then just return original element if corresponding element was not selected or the value of that element:

arrayTwo.map((element, index) => arrayOne[index].selected ? arrayOne[index].color : element)

const arrayOne = [
    {
        "color": "#f8edd1",
        "selected": true
    },
    {
        "color": "#d88a8a",
        "selected": false
    },
    {
        "color": "#474843",
        "selected": false
    },
    {
        "color": "#9d9d93",
        "selected": true
    },
    {
        "color": "#c5cfc6",
        "selected": false
    }
];

const arrayTwo = [
    "#1c2130",
    "#028f76",
    "#b3e099",
    "#ffeaad",
    "#d14334"
]

const result = arrayTwo.map((element, index) => arrayOne[index].selected ? arrayOne[index].color : element);

console.log(result);

answered Aug 20, 2022 at 3:01

Adassko

5,36326 silver badges40 bronze badges

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

2 Comments

RobbieC Over a year ago

Thanks this worked perfectly!! Question, will this still work if the 2 arrays do not have the same number of indexes?

Adassko Over a year ago

It will work as long as arrayTwo has same or a greater number of elements in it

Joey Pelletier · Accepted Answer · 2022-08-20 04:05:33Z

I don't know if you'll need arrayOne and arrayTwo later on so I created a third one like so :

const arrayThree = [];
arrayOne.forEach(function(element, index) {
  arrayThree.push(element.selected ? element.color : arrayTwo[index]);
});

Here, we iterate on arrayOne with a forEach loop. We use two parameters to get corresponding values:

element = the object at a given index in arrayOne

Be aware that forEach loop is asynchronous code. So, if you need arrayThree the line right after the forEach loop and you have to iterate a list of hundreds of element, you may get an empty array. In that case, you can try to use a regular loop :

const arraythree = [];
for(const [index, element] of arrayOne.entries()) {
  arrayThree.push(element.selected ? element.color : arrayTwo[index]);
}

If you need more information, let me know.

const arrayOne = [
    {
        "color": "#f8edd1",
        "selected": true
    },
    {
        "color": "#d88a8a",
        "selected": false
    },
    {
        "color": "#474843",
        "selected": false
    },
    {
        "color": "#9d9d93",
        "selected": true
    },
    {
        "color": "#c5cfc6",
        "selected": false
    }
];

const arrayTwo = [
    "#1c2130",
    "#028f76",
    "#b3e099",
    "#ffeaad",
    "#d14334"
];

const arrayThree = [];
arrayOne.forEach(function(element, index) {
  arrayThree.push(element.selected ? element.color : arrayTwo[index]);
});

console.log('result : ', arrayThree)

Collectives™ on Stack Overflow

replace objects in array from another array

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