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?

CodePudding user response：

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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' ] ]
// ]

CodePudding user response：

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 ]
        }
    }
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Pretty straight forward attempt would be

[...arr1, ...arr2].forEach(console.log)

CodePudding user response：

const newArray = [...arr1,...arrr2]; console.log(newArray);