ReactJS: How can I create multi-level array using Map

Question

I have this data in my CartData usestate hook.

[
  0:[
      0:{
          data1: "any",
          data2: "any",
          imgArray: ["img1.jpg"],
        },
        
      1:{
          data1: "any",
          data2: "any",
          imgArray: ["img2.jpg"],
        }
    ]
]

And I want to store imgArray data i.e ( img1.jpg & img2.jpg ) in a nested array like shown below. Because in future each array on each index can have multiple items.

imageArray:  [ 0: ["img1.jpg"], 1: ["img2.jpg"] ]

I'm using this code below. But not getting desired output. How can I do that?

let imageArray = [], data1 = [], data2 = [];

CartData.map((value, index) => {

                    value.map((value, index) => {

                        value.imgArray.map((value, index) => {
                            imageArray[index]=value;
                        })

                        data1[index] = value.data1;
                        data2[index] = value.data2;
                    })
                
}

Getting following Output using above code.

{
    data1 : [ 0: "any", 1: "any"],
    data2 : [ 0: "any", 1: "any"],
    imageArray : [ 0: "img1.jpg"],
}

I also tried this in map but not got the desired result.

imageArray[index[index]] = value;

can you try to use different variables for the inner and outer loops? This could be the cause of the error too. — tsamridh86
– tsamridh86, Commented Jun 19, 2021 at 13:19
So all the values are placed on the third level of that tree, but not higher? — raina77ow
– raina77ow, Commented Jun 19, 2021 at 13:22
I tried but that's not causing the issue because the inner loop variables having scope limit to inner loop not outer loop. — Muhammad Usman
– Muhammad Usman, Commented Jun 19, 2021 at 13:22

tsamridh86 · Accepted Answer · 2021-06-19 13:23:25Z

1

Is this what you've been looking for?

const CartData = [
     [
         {
            data1: "any",
            data2: "any",
            imgArray: ["img1.jpg"],
        },
        {
            data1: "any",
            data2: "any",
            imgArray: ["img2.jpg"],
        }
    ]
]

const imgArray = CartData.flatMap((cart) => cart.map(innerCart => innerCart.imgArray))

The result will be :

imgArray = [["img1.jpg"], ["img2.jpg"]]

answered Jun 19, 2021 at 13:23

tsamridh86

1,49612 silver badges23 bronze badges

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

3 Comments

Muhammad Usman Over a year ago

I'm getting perfect result but also getting a second parameter undefined in console ???

tsamridh86 Over a year ago

Can you put a sample of cartData when that occurs?

Muhammad Usman Over a year ago

Thanks for helping, I removed that error and now code is perfect.

raina77ow · Accepted Answer · 2021-06-19 13:33:16Z

If the structure of CardData is always the same, you actually don't need indexes:

const CartData = [
  [{
      data1: "any",
      data2: "any",
      imgArray: ["img1.jpg"],
    },
    {
      data1: "any",
      data2: "any",
      imgArray: ["img2.jpg"],
    }
  ]
];

const result = CartData.flat().reduce((acc, item) => {
  acc.data1.push(item.data1);
  acc.data2.push(item.data2);
  acc.imageArray.push(...item.imgArray);
  return acc;
}, {
  data1: [],
  data2: [],
  imageArray: []
});

console.log(result);

This code flattens all the images; if that's not what you need, and you actually you need them to be grouped by data source, just drop the flattening '...' operator:

acc.imageArray.push(item.imgArray);

Collectives™ on Stack Overflow

ReactJS: How can I create multi-level array using Map

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related