Display data from another array inside map function

Question

I have two arrays:

const Array1 = [ 
{id:1, sold: 69,  productName: 'Epic' image: 'someimage.svg' } ,
{id:2, sold: 121,  productName: 'Legend' image: 'someimage.svg' } ,
{id:3, sold: 368,  productName: 'Top' image: 'someimage.svg' }
]

const Array2 = [ 
{ productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } ,
{ productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } ,
{ productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' }
]

And i want to display data in my JSX from both of them. I gave it a try with Array.map in map , but that is not the solution that i am after.

JSX

...
return (
    <> 
     {
       Array1.map((dataFromFirstArray) => 
        Array2.map((dataFromSecondArray) => (
          <div>
            <img src={dataFromFirstArray.img} />
            <p> {dataFromFirstArray.sold} sales </p>
             <p> {dataFromSecondArray.productBrand} </p>
             <p> {dataFromSecondArray.productName} </p>
             <p> {dataFromSecondArray.productCategory} </p>
          </div>
       )
     }
    </>
)

UPDATE

How can i combine the array's into one if productName is the same in both of them. At the end of the day i want to use all the data but coming from one array.

Array1.concat(Array2).map(() => { /* here is your code */ }) — akazakou
– akazakou, Commented Apr 27, 2022 at 12:21

R4ncid · Accepted Answer · 2022-04-27 13:16:16Z

2

It's better if you merge it in a single array and than map that

like this

const Array1 = [ 
{id:1, sold: 69,  productName: 'Epic', image: 'someimage.svg' } ,
{id:2, sold: 121,  productName: 'Legend', image: 'someimage.svg' } ,
{id:3, sold: 368,  productName: 'Top', image: 'someimage.svg' }
]

const Array2 = [ 
{ productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } ,
{ productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } ,
{ productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' }
]

const products = Array1.map(({productName, ...rest}) => {
  return {
    ...rest,
    ...Array2.find(p => p.productName === productName) || {}
  }
})

console.log(products)

//and then

/*products.map((p) => 
        
          <div>
            <img src={p.img} />
            <p> {p.sold} sales </p>
             <p> {p.productBrand} </p>
             <p> {p.productName} </p>
             <p> {p.productCategory} </p>
          </div>
       )
     
    </>
    */

edited Apr 27, 2022 at 13:16

answered Apr 27, 2022 at 12:38

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PandaMastr Over a year ago

i've done an update on my question

Pavan Nagadiya · Accepted Answer · 2022-04-27 13:12:31Z

1

Here is my answer.

{Array1.map((dataFromFirstArray, i) =>
      Array2.map((dataFromSecondArray, j) => {
        if (j === i) {
          return (
            <div>
              <p> {dataFromFirstArray.id}</p>
              <img src={dataFromFirstArray.image} />
              <p> {dataFromFirstArray.sold} sales </p>
              <p> {dataFromSecondArray.productBrand} </p>
              <p> {dataFromSecondArray.productName} </p>
              <p> {dataFromSecondArray.productCategory} </p>
            </div>
          );
        }
      })
    )}

It's working fine for me please try once at your end.

edited Apr 27, 2022 at 13:12

answered Apr 27, 2022 at 12:31

Pavan Nagadiya

6824 silver badges11 bronze badges

2 Comments

PandaMastr Over a year ago

i've done an update on my question

Pavan Nagadiya Over a year ago

Hey @PandaMastr I update answer please chek again.

PandaMastr · Accepted Answer · 2022-04-27 13:17:45Z

So i guess the answer is pretty simple Because we have the data like from the both array's like this :

const Array1 = [ 
{id:1, sold: 69,  productName: 'Epic' image: 'someimage.svg' } ,
{id:2, sold: 121,  productName: 'Legend' image: 'someimage.svg' } ,
{id:3, sold: 368,  productName: 'Top' image: 'someimage.svg' }
]

const Array2 = [ 
{ productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } ,
{ productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } ,
{ productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' }
]

Instead of concatenating it we map over and we search uppon keys that match. So this is my solution :

let Array3 = totalSales.map((item, i) => Object.assign({}, item, soldStatsData[i]));

And the final result is like this :

console.log(Array3)
--------------------
[
 {  
   id:1, 
   sold: 69, 
   productName: 'Epic', 
   productBrand: 'Chiquita', 
   productCategory:'Banana' 
   image: 'someimage.svg' 
} ,
{  
   id:2, 
   sold: 121,  
   productName: 'Legend',
   productBrand: 'Famoozo',
   productCategory: 'Mango' 
   image: 'someimage.svg',
} ,
{
   id:3, 
   sold: 368,  
   productBrand: 'PinkLady',
   productName: 'Top',
   productCategory: 'Apple',
   image: 'someimage.svg'
}

Collectives™ on Stack Overflow

Display data from another array inside map function

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related