Modify an array of objects inside an array of objects in js

Question

Hello developers I'm trying to modify an array of objects inside an array of objects before deploying its result to Redux reducer. The array is obtained through a request to an endpoint, reason why i must to create an instance of writable copy of it, and then proceed on the process

Lest say i have this array:

 allProducts=    [
            {
               
                "product_type": "Bikes",
                "product_imgs": [
                    {
                        "id": 5,
                        "url": "Mountain Bike/Screenshot (200)"
                    },
                    {
                        "id": 6,
                        "url": "Mountain Bike/Screenshot (200)"
                    }
                ],
                "product_name": "product test 1"
            },
            {
               
                "product_type": "Bikes",
                "product_imgs": [
                    {
                        "id": 7,
                        "url": "City Bike/banderaa"
                    },
                    {
                        "id": 8,
                        "url": "City Bike/banderaa"
                    }
                ],
                "product_name": "product test 2"
            }
       ]

I would like to modify the items inside the array product_imgs of each object, but for that, having in mind this array comes from a request, i do create a readable copy an over that i set the logic.

let instance=[...allProducts];

then using a double for each (though i also tried using a doule for loop) i reach till every image inside the array of objects product_imgs of each object:

        instance.forEach(array=>array.product_imgs.map(element => {
          
          this.imgDownLoaderFirebase
          .ref(element.url)
          .getDownloadURL()
          .toPromise()
          .then((url) => {
            console.log(url);
            
            //then in this space once the url of some firebase endpoint is reached and else 
            //i would like to modify that object inside the array product_imgs which is at the same time 
            //part of the instance array.
            //For that i expose that this new url gotten would be asigned as the new 
            //value thus
            
            element = { ...element };
            element.url=url
            
            console.log(element);
            console.log(instance);//Printing the general array in order to check if changes committed
           
          })
       })

        

I want to specify that i use first a foreach and then a map in order to modify the inner array of objects result, but using a double for each doesn't precisely inmprove this situation:

instance.forEach(array=>array.product_imgs.forEach(element => {........

Then checking the logs, the element (item url) inside the array of objects product_imgs of the array of obejcts instance, is modified, but the external array containing the inner modified not

How could i improve this? Thanks

Answer 1

If your goal is to extract all product_img values from your array, you could try something like the following:

// This line will convert your array of object into an array of array of urls, using a destructuring process
const urls = allProducts.map(({ product_img }) => product_img);

// This line will merge the previous result into a single-level array of urls that you can iterate onto.
const result = [].concat([], ...res);

Edit: I forgot to mention that this process will in fact return an array of objects including your id and url.