Accessing item in array of json object

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?

can you post your code as well

IAMSTR
– IAMSTR

2020-12-29 08:12:15 +00:00
Commented Dec 29, 2020 at 8:12 — IAMSTR
– IAMSTR, Commented Dec 29, 2020 at 8:12
Hi @imastr - Added code, please check

Saurabh
– Saurabh

2020-12-29 08:49:58 +00:00
Commented Dec 29, 2020 at 8:49 — Saurabh
– Saurabh, Commented Dec 29, 2020 at 8:49
try bracket notation item["image"][0] instead

IAMSTR
– IAMSTR

2020-12-29 09:04:37 +00:00
Commented Dec 29, 2020 at 9:04 — IAMSTR
– IAMSTR, Commented Dec 29, 2020 at 9:04

Dharman · Accepted Answer · 2020-12-29 17:03:27Z

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

edited Dec 29, 2020 at 17:03

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Dec 29, 2020 at 8:22

Jazib Bashir

5035 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saurabh Over a year ago

Jazib - added addition code. You will see item is iterative and contains one json at a time and image is array of json object .

Jazib Bashir Over a year ago

I have tried your code in react native expo snack it's working fine: snack.expo.io/W-h8BhEiy

Collectives™ on Stack Overflow

Accessing item in array of json object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related