How to parse THIS json reply in react native

Question

I'am a noob in react native and i'am writing my first app to read a response from an API. Till now i know how to make the call and get the response and parse the regular replies in an array in the state, but i'am not finding the right way to parse the json reply of this specific form. I tried saving it in an array but its not working.

{
"activities": [
    {
        "id": 19,
        "files": [
            {
                "id": 63,
                "created_at": "15/05/2020 15:09:34",
                "updated_at": "15/05/2020 15:09:34",
                "file": "/media/activities/newFile133.11531268506258.jpg",
                "is_default": false,
                "activity": 19
            },
            {
                "id": 65,
                "created_at": "15/05/2020 15:10:15",
                "updated_at": "15/05/2020 15:10:15",
                "file": "/media/activities/newFile203.0997630588359.jpg",
                "is_default": false,
                "activity": 19
            },
            {
                "id": 64,
                "created_at": "15/05/2020 15:09:53",
                "updated_at": "15/05/2020 15:10:27",
                "file": "/media/activities/newFile193.8056151444231.jpg",
                "is_default": true,
                "activity": 19
            },
            {
                "id": 62,
                "created_at": "15/05/2020 15:08:56",
                "updated_at": "15/05/2020 15:10:27",
                "file": "/media/activities/newFile39.839136995440484.jpg",
                "is_default": false,
                "activity": 19
            }
        ],
        "created_at": "15/05/2020 14:52:54",
        "updated_at": "15/05/2020 14:58:01",
        "title": "Camping",
        "description": "Camp Al Wilayah",
        "category": 10
    },
    {
        "id": 21,
        "files": [
            {
                "id": 66,
                "created_at": "15/05/2020 15:16:02",
                "updated_at": "15/05/2020 15:16:02",
                "file": "/media/activities/newFile46.35084778104737.jpg",
                "is_default": true,
                "activity": 21
            },
            {
                "id": 67,
                "created_at": "15/05/2020 15:16:33",
                "updated_at": "15/05/2020 15:16:33",
                "file": "/media/activities/newFile49.28140513312763.jpg",
                "is_default": false,
                "activity": 21
            }
        ],
        "created_at": "15/05/2020 15:11:22",
        "updated_at": "15/05/2020 15:11:22",
        "title": "Aashoura",
        "description": "Majlis Aazaa",
        "category": 12
    },
    {
        "id": 18,
        "files": [
            {
                "id": 68,
                "created_at": "15/05/2020 15:21:18",
                "updated_at": "15/05/2020 15:21:18",
                "file": "/media/activities/newFile71.35101359514769.jpg",
                "is_default": true,
                "activity": 18
            },
            {
                "id": 69,
                "created_at": "15/05/2020 15:22:42",
                "updated_at": "15/05/2020 15:22:42",
                "file": "/media/activities/newFile107.17719628795922.jpg",
                "is_default": false,
                "activity": 18
            }
        ],
        "created_at": "15/05/2020 14:52:11",
        "updated_at": "15/05/2020 15:17:34",
        "title": "Takliff",
        "description": "Taklif ceremony",
        "category": 7
    },
    {
        "id": 22,
        "files": [
            {
                "id": 70,
                "created_at": "15/05/2020 15:42:18",
                "updated_at": "15/05/2020 15:43:03",
                "file": "/media/activities/97026390_682458148963323_2038839267676913664_n.mp4",
                "is_default": true,
                "activity": 22
            }
        ],
        "created_at": "15/05/2020 15:24:46",
        "updated_at": "15/05/2020 15:24:46",
        "title": "Laylat Qader",
        "description": "Event of Laylat al Qader",
        "category": 6
    },
    {
        "id": 23,
        "files": [
            {
                "id": 73,
                "created_at": "15/05/2020 17:42:43",
                "updated_at": "15/05/2020 17:42:43",
                "file": "/media/activities/newFile47.470692661344614.jpg",
                "is_default": false,
                "activity": 23
            },
            {
                "id": 74,
                "created_at": "15/05/2020 18:30:05",
                "updated_at": "26/05/2020 21:34:09",
                "file": "/media/activities/newFile28.504968134645907.jpg",
                "is_default": false,
                "activity": 23
            },
            {
                "id": 72,
                "created_at": "15/05/2020 15:51:29",
                "updated_at": "15/07/2020 07:49:27",
                "file": "/media/activities/newFile82.57124842095388.jpg",
                "is_default": false,
                "activity": 23
            },
            {
                "id": 71,
                "created_at": "15/05/2020 15:50:59",
                "updated_at": "15/07/2020 07:50:09",
                "file": "/media/activities/newFile3.0461490605067763.jpg",
                "is_default": true,
                "activity": 23
            }
        ],
        "created_at": "15/05/2020 15:50:36",
        "updated_at": "15/07/2020 07:46:38",
        "title": "Zayyana Al Dar",
        "description": "Young generation posts",
        "category": 11
    }
],
"total": 5

}

Answer 1

Firstly, entire response is inside object bracket {}.

So, response.activities will give array of a activities.

Then use it like var x = response.activities

var first = x[0]

var second = x[1]

and so on .