linking array values in an object to an array in a nested object-CodePudding

How do I take every string value in the imageKeys array and use it to construct a url in the images array in the nested object imageList, without mutating the object?


     const myInitialStateFromParent = {
       imageKeys: ['name1', 'name2'],
       itemType: "something",
       itemName: "something else",
       ImageList:{
        images: [], 
        height: 100,
        width: 100,
        maxImages: 2
       }
     }

for each key in imageKeys I want to add a new object in the empty images array. eg:

{url: baseUrl   '/'   'name1'},
{url: baseUrl   '/'   'name2'}

I want to keep everything else in the entire object the same. This is in a React child function component, useEffect(() => {}, [imageKeys]).

I tried something like,

  for (const k of myInitialStateFromParent.imageKeys) {
      var img = {url: `baseUrl${k}`}
      [...myInitialStateFromParent.ImageList.images, img] // copy the images, insert new one
  }

But I'm getting an error about spread only working with the last formal parameter.

CodePudding user response：

In your case you just need to push values to your images array:

Easy way:

myInitialStateFromParent.imageKeys.forEach((k) => {
  myInitialStateFromParent.ImageList.images.push({ url: `baseUrl${k}` });
});

You're not assigning values in your code, in order to use your code and have results you have to change it, and assign the new values to that array.

Hard way:

for (const k of myInitialStateFromParent.imageKeys) {
  const img = { url: `baseUrl${k}` };
  myInitialStateFromParent.ImageList.images = [
    ...myInitialStateFromParent.ImageList.images,
    img,
  ];
  // or 
  // myInitialStateFromParent.ImageList.images = myInitialStateFromParent.ImageList.images.concat(img);
}

CodePudding user response：

You can use this code:

const myInitialStateFromParent = {
       imageKeys: ['name1', 'name2'],
       itemType: "something",
       itemName: "something else",
       ImageList:{
        images: [], 
        height: 100,
        width: 100,
        maxImages: 2
       }
     }
myInitialStateFromParent.imageKeys.forEach(key=>{
  return myInitialStateFromParent.ImageList.images.push({url: 'baseURL' key})
})

console.log(myInitialStateFromParent.ImageList.images)

CodePudding user response：

const myInitialStateFromParent = {
  imageKeys: ['name1', 'name2'],
  itemType: "something",
  itemName: "something else",
  ImageList:{
   images: [], 
   height: 100,
   width: 100,
   maxImages: 2
  }
}

const baseUrl = 'dummyUrl';

function mapUrls(object) {
  const { imageKeys }  = object;
  
  return {
    ...myInitialStateFromParent,
    imageKeys: imageKeys.map((string) => ({ url: `${baseUrl}/${string}`}))
  }
}

console.log(mapUrls(myInitialStateFromParent))