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.