Estoy tratando de reemplazar objetos en una matriz de otra matriz mientras mantengo el índice/orden en su lugar.
Entonces arrayOne:
[ { "color": "#f8edd1", "selected": true }, { "color": "#d88a8a", "selected": false }, { "color": "#474843", "selected": false }, { "color": "#9d9d93", "selected": true }, { "color": "#c5cfc6", "selected": false } ]matrizDos:
[ "#1c2130", "#028f76", "#b3e099", "#ffeaad", "#d14334" ]mi nueva matriz deseada sería:
[ "#f8edd1", "#028f76", "#b3e099", "#9d9d93", "#d14334" ] Entonces, los colores selected aún estarían en el mismo índice/posición en la matriz. La matriz deseada puede ser una matriz completamente nueva o una matriz actualizada Uno o Dos. El problema principal con el que me encontré fue mapearlo cuando había más de 1 objeto con el selected: true .
Esta fue mi primera puñalada en él:
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) } También tenga en cuenta que arrayOne es en realidad un estado de uso de React, pero no estoy buscando actualizar el estado de uso, estoy haciendo otra cosa con los newColors , pero si es más fácil crear un estado de uso separado para ejecutar lo que estoy tratando de hacer, está bien.
Probablemente pueda usar la función .map en arrayTwo y usar el segundo argumento, que es un índice. Luego, simplemente devuelva el elemento original si no se seleccionó el elemento correspondiente o el valor de ese elemento:
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);No sé si necesitará arrayOne y arrayTwo más adelante, así que creé un tercero así:
const arrayThree = []; arrayOne.forEach(function(element, index) { arrayThree.push(element.selected ? element.color : arrayTwo[index]); });Aquí, iteramos en arrayOne con un bucle forEach. Usamos dos parámetros para obtener los valores correspondientes:
elemento = el objeto en un índice dado en arrayOne
Tenga en cuenta que forEach loop es un código asíncrono. Entonces, si necesita arrayThree la línea justo después del ciclo forEach y tiene que iterar una lista de cientos de elementos, puede obtener una matriz vacía. En ese caso, puede intentar usar un bucle normal:
const arraythree = []; for(const [index, element] of arrayOne.entries()) { arrayThree.push(element.selected ? element.color : arrayTwo[index]); }Si necesitas más información, házmelo saber.
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)