Getting returned API result in different function in ReactJS

Question

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.

Did the Api call happened ? what was the result of the api call? — Gowri Pranith Kumar
– Gowri Pranith Kumar, Commented Jan 14, 2020 at 4:16

Bilal Hussain · Accepted Answer · 2020-01-14 04:21:14Z

1

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
}))

}

answered Jan 14, 2020 at 4:21

Bilal Hussain

5726 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Fritz Over a year ago

res.json() doesn't return a promise, does it?

Vectrobyte · Accepted Answer · 2020-01-14 07:47:09Z

0

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.

edited Jan 14, 2020 at 7:47

Vectrobyte

1,48516 silver badges33 bronze badges

answered Jan 14, 2020 at 4:20

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

3 Comments

soubhagya pradhan Over a year ago

Still getting null data

Vectrobyte Over a year ago

It depends on how fetch function is written. If it is not returning any promise, then it will indeed not return the expected result.

Christian Fritz Over a year ago

I've tested this code with another service that returns json data, so I'm confident the code works as expected. Have you verified the response from the server is JSON data?

Collectives™ on Stack Overflow

Getting returned API result in different function in ReactJS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related