I have a function that fetches data from the url and is supposed to return it:

const fetchTableData = () => {
fetch('')
    .then(result => result.json())
    .then(data => {
        return data;
    })
}

export default fetchTableData;

The problem is that when i import this function and try to use it, it always returns undefined.

When i console log the data inside the function itself, you can see it is available. The function just doesn't work when i try to import it.

What is the problem here? Why does it work that way?

I have a function that fetches data from the url and is supposed to return it:

const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })
}

export default fetchTableData;

The problem is that when i import this function and try to use it, it always returns undefined.

When i console log the data inside the function itself, you can see it is available. The function just doesn't work when i try to import it.

What is the problem here? Why does it work that way?

• javascript
• reactjs
• ecmascript-6
• fetch-api

• You should add the code where you implemented it – Just code Commented Nov 21, 2018 at 12:36

3 Answers 3

Try this =) You have to return something from the fetchTableData function also.

const fetchTableData = () => {
  const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })

    return fetchedData;
}

export default fetchTableData;

Or you can just return it like this:

const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(data => {
            return data;
        })
    }

    export default fetchTableData;

You need to either store data in a global variable or assign any variable to fetch to get return data.

//First way
fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        console.log("data",data);
    });
    
//Second way
let binData = null;

fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        binData = data;
        console.log("binData", binData);
    });
    

Here is the working example.

In your code you were not returning from the fetchTableData function. Only from the the second then() callback. When a function has no return value, undefined will be returned.

Try this instead:

const fetchTableData = () => {
const myResponse = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })
return myResponse;
}

export default fetchTableData;

What now happens is the following:

1. The response return by the second then() function is returning the data.
2. We are saving this data in a variable, named myResponse.
3. We are now returning this value from the function fetchTableData.