React Fetch - Accessing a nested Object

Hi guys,
I am just working with react-select and want to fill an asynchronous select with data I fetch through an API. The data are fetched. The problem is that the data I need is needed in the response and at the moment it seems that I cannot set data structures like “response.data.name”. This gives me an error.

Here’s the fetching coding:

    const loadOptions = (inputValue) => {
        console.log(inputValue)
        return fetch('APIURL', {
            method: 'POST',
            body: JSON.stringify({
                "entity_name": inputValue
            }),
            headers: {
                'Authorization': 'dummy'
            }
        }).then(response => response.json())
    };

and here my select

            <AsyncSelect
                cacheOptions
                defaultOptions
                value={selectedValue}
                getOptionLabel={e => e.name}
                getOptionValue={e => e.entity_id}
                loadOptions={loadOptions}
                onInputChange={handleInputChange}
                onChange={handleChange}
            />

The structure of my response is the following:

{
    "interface": "Get Entities",
    "data": [
        {
            "entity_id": "28",
            "name": "University of Andorra",
            "url": "uda.ad",
            "urlname": "udaad",
            "category": "1",
            "creation": "0000-00-00 00:00:00"
        },
        {
            "entity_id": "29",
            "name": "Abu Dhabi University",
            "url": "adu.ac.ae",
            "urlname": "aduacae",
            "category": "1",
            "creation": "0000-00-00 00:00:00"
        },

and I just want the nested data-object considered. How can I solve this?

Thanks in advance for your help.

Problem solved. :slight_smile: Here’s the solution:

.then(response => response.json()).then(json => json.data)

In another “then” I narrowed down the json to “data”.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.