CODEWITHSUNDEEP
javascriptarraysreactjs
zhiping foong
zhiping foong

Reputation: 3

How to combine 2 arrays into 1 React

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?

Upvotes: 0

Views: 326

Answers (5)

user17269836
user17269836

Reputation: 1

const newArray = [...arr1,...arrr2];
 newArray.map((element)=>{
   return console.log(element)
});

Upvotes: 0

Aayush Bhankale
Aayush Bhankale

Reputation: 61

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

Upvotes: 1

Schemiii
Schemiii

Reputation: 366

Pretty straight forward attempt would be

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

Upvotes: 0

AFreeChameleon
AFreeChameleon

Reputation: 86

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

Upvotes: 0

Dan P
Dan P

Reputation: 924

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

Upvotes: 0

Related Questions