Trying to call a function inside a table but it returns a promise

Question

let data = [223, 34, 456, 56, 67];

function getDataFromApi(paramfromTableCell){
let postData = {data : paramfromTableCell}
   let result = apiResponse(url, 'post', postData).catch((err => console.log(err)))
   return result;
}

data.map((value)=>{
 return(
       <th>{getDataFromApi(value)}</th>
 )
})

Calling a function inside table cell but it's returning a promise. On calling a function it takes a parameter and return the name as per number but it returning promise. Is there a way to resolve it?

Can you share the apiResponse function? Most likely it is returning a promise which you are then storing in result and returning. — Sanchit Agarwal, Apr 07 '23 at 16:47
Does this answer your question? [How can I access the value of a promise?](https://stackoverflow.com/questions/29516390/how-can-i-access-the-value-of-a-promise) — jonrsharpe, Apr 07 '23 at 16:48
Make your function `async`, then you can use `await apiResponse(...)` — Barmar, Apr 07 '23 at 16:51
@SanchitAgarwal const apiResponse = async (url, method = "get", formData = {}) => { try { return await axiosInstance({ method: method, url: url, headers: { Token: sessionStorage.getItem("token"), }, data: formData, }); } — devReact, Apr 07 '23 at 16:51
@Barmar is right, you need to await the result from apiResponse, and need to convert the getDataFromApi function to an async once. — Sanchit Agarwal, Apr 07 '23 at 16:57

score 1 · Accepted Answer · answered Apr 07 '23 at 17:06

1

It looks like you using react. You need to save your responses into a react state for that.

Here is a example code how it should look like (not tested):

let data = [223, 34, 456, 56, 67];
const [responses, setResponses]  = useState([]);

useEffect(() => {
   const getAllResponses = () => Promise.all(
       data.map(val =>  getDataFromApi(val))
   );

   getAllResponses().then(responses => setResponses(responses));
}, [data])

function getDataFromApi(paramfromTableCell){
    let postData = {data : paramfromTableCell}
    return apiResponse(url, 'post', postData).catch((err => console.log(err)))
}

responses.map((value)=>{
 return(
       <th>{value}</th>
 )
})

answered Apr 07 '23 at 17:06

Sysix

1,572
1
16
23

it's working fine. but useEffect gets into infinite loop. calling API(getDataFromApi()) again and again. – devReact Apr 07 '23 at 19:35
@devReact then your data array is changing again and again, maybe wrap your data into a store too :) – Sysix Apr 07 '23 at 20:51
Actually, the let data = [223, 34, 456, 56, 67]. I am getting from a function. Is there any way to update dependency because if I take function as a dependency it again goes into infinite loop – devReact Apr 27 '23 at 19:49
you need to `useMemo` to remember the array. so it is not always a new array on every render – Sysix Apr 27 '23 at 20:34

Julian · Answer 2 · 2023-04-07T16:52:47.200

-1

You have to await the promise to get the result. Otherwise you will just get the promise. So add async to your map function and then use await:

data.map(async (value)=>{
  return(<th>{await getDataFromApi(value)}</th>
)

edited Apr 07 '23 at 16:52

answered Apr 07 '23 at 16:51

Julian

312
2
14

Trying to call a function inside a table but it returns a promise

2 Answers2