How to store a JSON response from the API IGDB into an array

Issue

I'm new in JavaScript and I began to make a mobile application with React Native. However, I got some issues with the IGDB API and "Fetch" from MDN.

I've been trying to store a JSON response into an array and to print it through a FlatList. However, it doesn't print anything, neither the "Test: " or the "{item.id}" and I'm trying to understand if it is a problem about the API or my use of the FlatList.

I tried my request on Postman and it works.

My response is printed correctly into the terminal when I make the request to the API.

I'll show you here my two main JS files, but also a warning I receive, when I get the response from the API.

Don't hesitate if you have questions, I'll answer as clearly as possible.

//Search.js

import React from 'react'
import { View, TouchableOpacity, TextInput, StyleSheet, Image, FlatList, Text } from 'react-native'
import { getGamesFromApiWithSearchedText } from '../API/IGDB'

class Search extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            games: []
        }
    }

    render() {
        return (
            <View>
                <View>
                    <TextInput placeholder='Search games and stuff...' />
                    <TouchableOpacity onPress={() => this._loadGames()}>
                        <Image source={require('../images/icons/ic_search.png')}/>
                    </TouchableOpacity>
                </View>

                <FlatList
                    data={this.state.games}
                    extraData={this.state.games}
                    keyExtractor={(item) => item.id.toString()}
                    renderItem={({ item }) => <Text> Test: {item.id}  </Text>}
                />
            </View>
        )
    }

    _loadGames() {
        console.log("Search button game has been clicked")
        getGamesFromApiWithSearchedText().then(data => {
            this.setState({ games: data.results })
        })
    }
}

export default Search

//IGDB.js

export function getGamesFromApiWithSearchedText() {
    const url = 'https://api-v3.igdb.com/games'
    return fetch(url, {
        method: 'POST',
        headers: {
            "user-key": API_TOKEN
        },
        body:
            'fields id, name, release_dates, rating, game_engines, summary, involved_companies, genres; search "Witcher"; limit 1;'
    })
        .then(response => response.json())
        .then(data => data)
        .catch((error) => console.log(error))
}

//Warning I receive

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.results')]
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Solution

I finally fixed my problem. It seems the ".results" in the function "_loadGames()" was causing the problem. I removed it and now everything seems to work fine.

Thanks all for the help!

Answered By - fredon413