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.

Answer 1

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);

Answer 2

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)