Reputation: 547
export function getNodeChartFilteredData(ChartContent, value) {
let abs = "primary"
let url = `http://127.0.0.1:8000/api/v1/home/get_node_chart_data_people?abs=${abs}`;
fetch(url)
.then(res => res.json())
.then(res => {
return res
})
}
res = getNodeChartFilteredData()
console.log(res)
In ReactJS how can I get returned API result after complete in a different function?
My function is in utils so I want to call this function from different files.
I am always getting null data when I tried.
Upvotes: 1
Views: 46
Reputation: 21384
The issue is one of asynchronicity. The Promise of fetch
resolves in a different scope than the function you are trying to return something from. Could you structure your logic like this instead? This should work.
export function getNodeChartFilteredData(ChartContent, value) {
let abs = 'primary';
let url = `http://127.0.0.1:8000/api/v1/home/get_node_chart_data_people?abs=${abs}`;
return fetch(url)
.then(res => res.json())
}
getNodeChartFilteredData()
.then(res => {
console.log(res)
});
This returns the promise so you can act on its resolution (then
) in the calling scope. Alternatively you could pass a callback to getNodeChartFilteredData
, but it's not good practice to mix promise based logic with old-school callbacks.
Upvotes: 0
Reputation: 572
Assuming that your API works correctly you are not chaining promises correctly
export function getNodeChartFilteredData(ChartContent, value) {
let abs = "primary"
let url = `http://127.0.0.1:8000/api/v1/home/get_node_chart_data_people?abs=${abs}`;
fetch(url)
.then(res => res.json()
.then(res => {
return res
}))
}
Upvotes: 1