I am pretty new to react. Currently i am trying to combine 2 arrays item into one but i would like to iterate over each item. How can i do that?
const arr1 = [ { value: "red", label: "Red" },{ value: "yellow", label: "Yellow" },{value: "Blue", label: "Blue" },]
const arr2 =[ { value: "s", label: "S" },{ value: "m", label: "M" },{ value: "l", label: "L" },]
Expected result: ["red,s","red,m","red,l"],["yellow,s","yellow,m","yellow,l"]....
I have tried concat() & reduce, but the result i get is two array merge together rather than items merge seperately. Can someone help please?
Juan Pablo Isaza
You can use map to manipulate with data.
const arr1 = [ { value: "red", label: "Red" },{ value: "yellow", label: "Yellow" },{value: "Blue", label: "Blue" },]
const arr2 =[ { value: "s", label: "S" },{ value: "m", label: "M" },{ value: "l", label: "L" },]
console.log(...arr1.map(data => {
return arr2.map(data2 => data.value + "," + data2.value)
}))This worked for me, using nested loops:
const arr1 = [ { value: "red", label: "Red" },{ value: "yellow", label: "Yellow" },{value: "Blue", label: "Blue" },]
const arr2 =[ { value: "s", label: "S" },{ value: "m", label: "M" },{ value: "l", label: "L" },]
const newarr = []
for (i=0; i<arr1.length; i++) {
tmp = []
for (j=0; j<arr2.length; j++) {
tmp.push([arr1[i].value, arr2[j].value])
}
newarr.push(tmp)
}
console.log(newarr)
// [
// [ [ 'red', 's' ], [ 'red', 'm' ], [ 'red', 'l' ] ],
// [ [ 'yellow', 's' ], [ 'yellow', 'm' ], [ 'yellow', 'l' ] ],
// [ [ 'Blue', 's' ], [ 'Blue', 'm' ], [ 'Blue', 'l' ] ]
// ]
Give this a try (feel free to change out the keys to either .value or .label)
function mergeArrays(arr1, arr2) {
let result = [];
for (let i = 0; i < arr1.length; i++) {
result.push([]);
for (let j = 0; j < arr2.length; j++) {
result[i] = [ ...result[i], arr1[i].value + arr2[j].value ]
}
}
}