Finding image uri in a nested array-CodePudding

I am trying to get the image uri from this payload. I can get to the image array with this but no further.

bikesArray.map(bikes => bikes.customerBikeImage.assets)

The entire payload is like this.

  {
"customerBikeComponents": "SRAM",
"customerBikeCondition": "Used",
"customerBikeImage": {
  "assets": [
    Array
  ]
},
"customerBikeMake": "Planet C",
"customerBikePrice": "1500",
"customerBikeRegister": "Yes",
"customerBikeSize": "80"

Then the array within the payload is:

  [
{
  "fileName": "BA459947-3C2A-49CE-8E44-D74B92D5EA49.jpg",
  "fileSize": 3583973,
  "height": 3088,
  "type": "image/jpg",
  "uri": "file:///var/mobile/Containers/Data/Application/DF4C4FB4-191F-4101-9A11-4FD728B3CE4B/tmp/BA459947-3C2A-49CE-8E44-D74B92D5EA49.jpg",
  "width": 2316
}

I am trying to get to the uri and assign that to a state. i have tried several different ways to no avail and thought I would get some help.

CodePudding user response：

hope this will help,

if you have mutiple imageUri and you want your end result looking like that:

[
[www.sampleImage1.jpg,www.sampleImage2.jpg],
[www.sample2Image1.jpg,www.sample2Image2.jpg]
]

you need to map on the nested array as well.

bikesArray.map(
    bike =>{
     let imageUri;               
     /** if there are multiple uri  */
     imageUri= bike.customerBikeImage.assets.map(fileData=>fileData.uri)
     return imageUri
   }
)

if you have only one imageUri in the array and you want your end result looking like that:

[
www.sampleImage1,
www.sample2Image1
]

just take the first element.

bikesArray.map(
    bike =>{
     let imageUri;                  
    /*if there is only one uri */   
     imageUri= bike.customerBikeImage.assets[0].uri
     return imageUri
   }
)

CodePudding user response：

You are trying to access Array when your data is Object.

const dataDB = {
  customerBikeComponents: "SRAM",
  customerBikeCondition: "Used",
  customerBikeImage: {
    assets: [
      [
        {
          fileName: "BA459947-3C2A-49CE-8E44-D74B92D5EA49.jpg",
          fileSize: 3583973,
          height: 3088,
          type: "image/jpg",
          uri:
            "file:///var/mobile/Containers/Data/Application/DF4C4FB4-191F-4101-9A11-4FD728B3CE4B/tmp/BA459947-3C2A-49CE-8E44-D74B92D5EA49.jpg",
          width: 2316
        }
      ]
    ]
  },
  customerBikeMake: "Planet C",
  customerBikePrice: "1500",
  customerBikeRegister: "Yes",
  customerBikeSize: "80"
};

Try to use property accessors and pick first item of assets Array using [0] The full route:

data.customerBikeImage.assets[0][0].uri

Also check this codesandbox react example where assets array has object child.