CODEWITHSUNDEEP
javascriptreactjs
Emanuele
Emanuele

Reputation: 2384

ReactJS: How to fix TypeError: data is not iterable

I have two applications running at the same time. The first one is fetching APIs from vessel-finder and finding only a specific number of boats. The second application is the user interface used to visualize data from the fetch, specifically latitude and longitude of boats.

The problem I have is that the fetch seems to arrive correctly to the end point but that throws an error of TypeError: data is not iterable as also shown here on the terminal.

It seems that the problem might be the API fetch. Below the code I am using for that:

router.get('/hello', async function(req, res, next) {
    try {
        const { data } = await axios.get(
            'https://api.vesselfinder.com/vesselslist?userkey=KEY'
        );
        const [ metaData, ships ] = data;
        console.log(data);
        res.send(data);
    } catch (error) {
        res.send(error);
        console.log(error);
    }
});

module.exports = router;

While investigating what the problem might be, I came across this source which also uses axios to get the call to the API. I wonder now if the fetch I am making is basically incomplete and because of that, data is not iterable... Also from this post I was able to handle a missing Promise using a try-catch block that was preventing me from compiling.

Is the problem due to a missing axios.get('API call').then.setState instruction I am missing?, if so how could I fix that?

Thank you very much for pointing to the right direction for solving this problem.

Upvotes: 0

Views: 7522

Answers (1)

user2063635
user2063635

Reputation: 214

look out for this line in your code -

 const [ metaData, ships ] = data;

perform object destructuring either between two objects or between two arrays. You are trying it out between an array and an object, which is a flaw. For more details, check https://javascript.info/destructuring-assignment#object-destructuring

Upvotes: 2

Related Questions