Fetch returns undefined when imported
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
asked Nov 21 '18 at 12:31
Skypho
21818
add a comment |
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
asked Nov 21 '18 at 12:31
Skypho
21818
You should add the code where you implemented it
– Just code
Nov 21 '18 at 12:36
add a comment |
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
asked Nov 21 '18 at 12:31
Skypho
21818
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
javascript reactjs ecmascript-6 fetch-api
asked Nov 21 '18 at 12:31
Skypho
21818
asked Nov 21 '18 at 12:31
Skypho
21818
asked Nov 21 '18 at 12:31
Skypho
21818
asked Nov 21 '18 at 12:31
Skypho
21818
asked Nov 21 '18 at 12:31
Skypho
21818
21818
You should add the code where you implemented it
– Just code
Nov 21 '18 at 12:36
add a comment |
You should add the code where you implemented it
– Just code
Nov 21 '18 at 12:36
You should add the code where you implemented it
– Just code
Nov 21 '18 at 12:36
You should add the code where you implemented it
– Just code
Nov 21 '18 at 12:36
add a comment |
3 Answers
3
active
oldest
votes
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;
answered Nov 21 '18 at 12:35
weibenfalk
52117
Wonderful, works like a charm. Thanks! May you please add a reminder that this wayfetchTableData()returns a Promise and its data needs to accessed using anotherthen? It would save couple of minutes for other newbies like me, that come around this question.
– Skypho
Nov 21 '18 at 12:58
add a comment |
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.
answered Nov 21 '18 at 12:37
varit05
1,630715
add a comment |
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:
- The response return by the second
then()function is returning the data. - We are saving this data in a variable, named
myResponse. - We are now returning this value from the function
fetchTableData.
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412109%2ffetch-returns-undefined-when-imported%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
answered Nov 21 '18 at 12:35
weibenfalk
52117
Wonderful, works like a charm. Thanks! May you please add a reminder that this wayfetchTableData()returns a Promise and its data needs to accessed using anotherthen? It would save couple of minutes for other newbies like me, that come around this question.
– Skypho
Nov 21 '18 at 12:58
add a comment |
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;
answered Nov 21 '18 at 12:35
weibenfalk
52117
Wonderful, works like a charm. Thanks! May you please add a reminder that this wayfetchTableData()returns a Promise and its data needs to accessed using anotherthen? It would save couple of minutes for other newbies like me, that come around this question.
– Skypho
Nov 21 '18 at 12:58
add a comment |
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;
answered Nov 21 '18 at 12:35
weibenfalk
52117
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;
answered Nov 21 '18 at 12:35
weibenfalk
52117
edited Nov 21 '18 at 12:41
answered Nov 21 '18 at 12:35
weibenfalk
52117
answered Nov 21 '18 at 12:35
weibenfalk
52117
answered Nov 21 '18 at 12:35
weibenfalk
52117
52117
Wonderful, works like a charm. Thanks! May you please add a reminder that this wayfetchTableData()returns a Promise and its data needs to accessed using anotherthen? It would save couple of minutes for other newbies like me, that come around this question.
– Skypho
Nov 21 '18 at 12:58
add a comment |
Wonderful, works like a charm. Thanks! May you please add a reminder that this wayfetchTableData()returns a Promise and its data needs to accessed using anotherthen? It would save couple of minutes for other newbies like me, that come around this question.
– Skypho
Nov 21 '18 at 12:58
Wonderful, works like a charm. Thanks! May you please add a reminder that this way
fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.– Skypho
Nov 21 '18 at 12:58
Wonderful, works like a charm. Thanks! May you please add a reminder that this way
fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.– Skypho
Nov 21 '18 at 12:58
add a comment |
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.
answered Nov 21 '18 at 12:37
varit05
1,630715
add a comment |
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.
answered Nov 21 '18 at 12:37
varit05
1,630715
add a comment |
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.
answered Nov 21 '18 at 12:37
varit05
1,630715
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.
//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);
});
//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);
});
answered Nov 21 '18 at 12:37
varit05
1,630715
answered Nov 21 '18 at 12:37
varit05
1,630715
answered Nov 21 '18 at 12:37
varit05
1,630715
answered Nov 21 '18 at 12:37
varit05
1,630715
1,630715
add a comment |
add a comment |
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:
- The response return by the second
then()function is returning the data. - We are saving this data in a variable, named
myResponse. - We are now returning this value from the function
fetchTableData.
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
add a comment |
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:
- The response return by the second
then()function is returning the data. - We are saving this data in a variable, named
myResponse. - We are now returning this value from the function
fetchTableData.
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
add a comment |
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:
- The response return by the second
then()function is returning the data. - We are saving this data in a variable, named
myResponse. - We are now returning this value from the function
fetchTableData.
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
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:
- The response return by the second
then()function is returning the data. - We are saving this data in a variable, named
myResponse. - We are now returning this value from the function
fetchTableData.
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
answered Nov 21 '18 at 13:05
Willem van der Veen
4,21831924
4,21831924
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412109%2ffetch-returns-undefined-when-imported%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You should add the code where you implemented it
– Just code
Nov 21 '18 at 12:36