i have this 2 array,
const firstArray = [
{
key: 'a',
value: 'a'
},
{
key: 'b',
value: 'b'
},
{
key: 'c',
value: 'c'
}
]
const secondArray = [
{
key: 'b',
value: 'd'
},
{
key: 'c',
value: 'e'
}
]
i want to merge these 2 array, and if a same key found on second array the second array value will replace first array value
the new array should look like this
const expectedArray = [
{
key: 'a',
value: 'a'
},
{
key: 'b',
value: 'd'
},
{
key: 'c',
value: 'e'
}
]
CodePudding user response:
As I see lodash
in your tags, I assume you want to use it.
You can use something like this:
var merged = _(firstArray)
.concat(secondArray)
.groupBy("key")
.map(_.spread(_.merge))
.value();
It basically groups all objects with the same key into an array with groupBy("key")
, then flattens out each array of values merging them and taking the last one with .map(_.spread(_.merge))
.
I suggest commenting out the final likes and see all the intermediate steps if you want to fully understand the process, it's interesting!
const firstArray = [{
key: 'a',
value: 'a'
},
{
key: 'b',
value: 'b'
},
{
key: 'c',
value: 'c'
}
]
const secondArray = [{
key: 'b',
value: 'd'
},
{
key: 'c',
value: 'e'
}
]
var merged = _(firstArray)
.concat(secondArray)
.groupBy("key")
.map(_.spread(_.merge))
.value();
console.log(merged);
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Solution without lodash
is to iterate through the second array and just look for matches.
If there's no match, push the item to the first array.
If there's a match, replace the item in the first array with the one from the second array.
const mergedArray = [...firstArray]
secondArray.forEach(newItem => {
const matchIndex = mergedArray.findIndex(prevItem => prevItem.key === newItem.key)
if (matchIndex === -1) {
mergedArray.push(newItem)
} else {
mergedArray[matchIndex] = newItem
}
})
CodePudding user response:
const mergedArray = [...secondArray, ...firstArray];
const lengthOfUniqueArray = new Set(mergedArray.map((item) => item.key)).size;
const expectedArray = newArray.slice(0, lengthOfUniqueArray);
expectedArray
will be what you want.
CodePudding user response:
You can concat, reverse, can all unique elements by key, and then reverse back:
const { flow, concat, reverse, uniqBy } = _
const mergeArrays = flow(
concat,
reverse,
arr => uniqBy(arr, 'key'),
reverse
)
const firstArray = [{"key":"a","value":"a"},{"key":"b","value":"b"},{"key":"c","value":"c"}]
const secondArray = [{"key":"b","value":"d"},{"key":"c","value":"e"}]
var merged = mergeArrays(firstArray, secondArray)
console.log(merged)
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>