Accessing item in array of json object - arrays

Question

The following is my json response from one of my APIs. I am trying to print image URL on console. You will see response is list of requests with each request having an array of images (json objects)
[
{
"image": [
{
"_id": "5fbfdc75aea26e00484a787a",
"name": "WhatsApp Image 2020-10-23 at 11.55.25 AM.jpeg",
"alternativeText": "",
"caption": "",
"hash": "Whats_App_Image_2020_10_23_at_11_55_25_AM_773f08e059",
"ext": ".jpeg",
"mime": "image/jpeg",
"size": 50.67,
"width": 590,
"height": 576,
"url": "/uploads/Whats_App_Image_2020_10_23_at_11_55_25_AM_773f08e059.jpeg",
"formats": {
"thumbnail": {
"name": "thumbnail_WhatsApp Image 2020-10-23 at 11.55.25 AM.jpeg",
"hash": "thumbnail_Whats_App_Image_2020_10_23_at_11_55_25_AM_773f08e059",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 160,
"height": 156,
"size": 5.97,
"path": null,
"url": "/uploads/thumbnail_Whats_App_Image_2020_10_23_at_11_55_25_AM_773f08e059.jpeg"
},
"small": {
"name": "small_WhatsApp Image 2020-10-23 at 11.55.25 AM.jpeg",
"hash": "small_Whats_App_Image_2020_10_23_at_11_55_25_AM_773f08e059",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 500,
"height": 488,
"size": 41.95,
"path": null,
"url": "/uploads/small_Whats_App_Image_2020_10_23_at_11_55_25_AM_773f08e059.jpeg"
}
},
"provider": "local",
"related": [
"5fbfdc7eaea26e00484a787b"
],
"createdAt": "2020-11-26T16:48:53.715Z",
"updatedAt": "2020-11-26T16:49:02.626Z",
"__v": 0,
"id": "5fbfdc75aea26e00484a787a"
}
],
"_id": "5fbfdc7eaea26e00484a787b",
"title": "I want an center table",
"description": "I want a 3x3 center table with Indian marble top",
"createdAt": "2020-11-26T16:49:02.619Z",
"updatedAt": "2020-11-26T17:23:40.655Z",
"__v": 0,
"category": {
"_id": "5fbfe21d0bbf020065dd0b1e",
"category_name": "Furniture",
"createdAt": "2020-11-26T17:13:01.743Z",
"updatedAt": "2020-11-26T17:13:01.754Z",
"__v": 0,
"id": "5fbfe21d0bbf020065dd0b1e"
},
"id": "5fbfdc7eaea26e00484a787b"
},
{
"image": [
{
"_id": "5fc073aaf41381008738f53a",
"name": "1RK-Apartment-for-Sale-in-Nalasopara-East-Mumbai-at-Sai-Krupa-Chawl-Listing-Photo_Kitchen.jpeg",
"alternativeText": "",
"caption": "",
"hash": "1_RK_Apartment_for_Sale_in_Nalasopara_East_Mumbai_at_Sai_Krupa_Chawl_Listing_Photo_Kitchen_90475427e3",
"ext": ".jpeg",
"mime": "image/jpeg",
"size": 12.22,
"width": 300,
"height": 300,
"url": "/uploads/1_RK_Apartment_for_Sale_in_Nalasopara_East_Mumbai_at_Sai_Krupa_Chawl_Listing_Photo_Kitchen_90475427e3.jpeg",
"formats": {
"thumbnail": {
"name": "thumbnail_1RK-Apartment-for-Sale-in-Nalasopara-East-Mumbai-at-Sai-Krupa-Chawl-Listing-Photo_Kitchen.jpeg",
"hash": "thumbnail_1_RK_Apartment_for_Sale_in_Nalasopara_East_Mumbai_at_Sai_Krupa_Chawl_Listing_Photo_Kitchen_90475427e3",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 156,
"height": 156,
"size": 6.45,
"path": null,
"url": "/uploads/thumbnail_1_RK_Apartment_for_Sale_in_Nalasopara_East_Mumbai_at_Sai_Krupa_Chawl_Listing_Photo_Kitchen_90475427e3.jpeg"
}
},
"provider": "local",
"related": [
"5fc07407f41381008738f53c"
],
"createdAt": "2020-11-27T03:34:02.177Z",
"updatedAt": "2020-11-27T03:35:35.325Z",
"__v": 0,
"id": "5fc073aaf41381008738f53a"
},
{
"_id": "5fc073fdf41381008738f53b",
"name": "images.jpeg",
"alternativeText": "",
"caption": "",
"hash": "images_4ba1796688",
"ext": ".jpeg",
"mime": "image/jpeg",
"size": 9.55,
"width": 351,
"height": 144,
"url": "/uploads/images_4ba1796688.jpeg",
"formats": {
"thumbnail": {
"name": "thumbnail_images.jpeg",
"hash": "thumbnail_images_4ba1796688",
"ext": ".jpeg",
"mime": "image/jpeg",
"width": 245,
"height": 101,
"size": 6.44,
"path": null,
"url": "/uploads/thumbnail_images_4ba1796688.jpeg"
}
},
"provider": "local",
"related": [
"5fc07407f41381008738f53c"
],
"createdAt": "2020-11-27T03:35:25.211Z",
"updatedAt": "2020-11-27T03:35:35.325Z",
"__v": 0,
"id": "5fc073fdf41381008738f53b"
}
],
"_id": "5fc07407f41381008738f53c",
"title": "pest control के लिए",
"description": "हमारा घर 700 वर्गफुट का है",
"createdAt": "2020-11-27T03:35:35.313Z",
"updatedAt": "2020-11-27T03:36:20.592Z",
"__v": 0,
"category": {
"_id": "5fc07424f41381008738f53f",
"category_name": "Pest Control",
"createdAt": "2020-11-27T03:36:04.739Z",
"updatedAt": "2020-11-27T03:36:04.748Z",
"__v": 0,
"id": "5fc07424f41381008738f53f"
},
"id": "5fc07407f41381008738f53c"
}
]
I now want to show Image URL and referring it in following manner in React Native.
Following is React Native code for view
<View>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={ renderItem }
/>
)}
</View>
and renderItem is defined as following
function renderItem({ item }) {
console.log(item.image[0].name);
}
and I get following error
undefined is not an object (evaluating 'item.image[0]')
Can you point where am I going wrong?

Answer 1

You're not reading data properly. As you're using nested JSON object so you can access data using the following approaches:
For Single Image:
item[0].image[0].url
For all the Images:
item.forEach(function(value, key) {
value.image.map(image => console.log(image.url));
});
I have tried your code in react native expo snack it's working fine Expo Snack Link