React/Javascript - TypeError: Cannot read properties of undefined (reading 'json')

Question

React & Javascript noob here, I'm trying to build my first React project. What I want to do is to have a button that fetches automatically the last matches I played on a game. I'm using a API that, when called correctly, returns this json:

{data: 
       [{id: 0, internal_id: "_map_id_halo1_pillar_of_autumn", name: "The Pillar Of Autumn"},
…]}

I want to extract the name for each object of data and display an unordered list below the button.

But when I click the button, the browser displays the error:

TypeError: Cannot read properties of undefined (reading 'json')

The code that does what I mentioned is as follows:

async fetchHaloMaps()
    {
        const url = 'https://cryptum.halodotapi.com/games/hmcc/metadata/maps'
        const mapNames = [];

        fetch(url, {
            "method": 'GET',
            "headers": {
                        'Content-Type': 'application/json',
                        'Cryptum-API-Version': '2.3-alpha',
                        'Authorization': 'Cryptum-Token XXX'
                     }
        })
        .then(response => {
            console.log(response);
            if (!response.ok)
                throw new Error("Response not ok!");
        })
        .then(response => 
            response.json())
        .then(data => {
                    
            const i=0;
             for (const d of data)
            {
                mapNames[i] = d.name;
                i++;
            }

            this.setState((state, props) => ({
                numberOfMaps : i
            }));
        })  
        .catch(error => {
            console.log("There was an error: " + error);
        });
    }

I think I'm "parsing" the JSON in the wrong way. But in the JSON, data i indeed an array with a "name" attribute. So I wanted to cycle the data array and copy the attribute "name", but the code above is not working. I know the HTTP request with fetch does succeed, since in the console.log I can see the response object and it has the 200 OK field, and I can see the JSON associated with the browser developer tools.

Answer 1

You did not return anything from this .then:

    .then(response => {
        console.log(response);
        if (!response.ok)
            throw new Error("Response not ok!");
    })

so there is no value that gets passed along to the next .then.

While you could do return response, a better approach would be to remove the intermediate .then entirely - only insert a .then when you need to wait for something asynchronous. At the time you get the response, you can check if it's OK and then return the .json(), without waiting in between.

.then(response => {
    if (!response.ok) {
        throw new Error("Response not ok!");
    }
    return response.json();
})
.then(data => {