Cannot Access to Data from my API (Asynchronous problems)

Question

I have a problem, I'm trying to get my room data from my API to use the map function after but I can't get the data. Here is my code.

    Axios.get(`/user/rooms?${token}`).then(res => {
        tmp.push(res.data)
    })
    const data = tmp
    const Rooms = [data]
    const RoomNames = []

And Here is the output after making console.log(data):

0: (4) [{…}, {…}, {…}, {…}]length: 1
__proto__: Array(0)

And data[0] is undefined

Welcome to Stack Overflow! Have a look at [writing the perfect question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question). What have you investigated? — Jeroen Heier, Dec 02 '19 at 17:30
Please provide the code that is causing the problem. There must be some small problem between you doing `console.log(data)` (and it works) and you doing `data[0]` (and it doesnt). Also check if the data has `undefined` in it, but that should not be abbreviated to `{...}` by the output.... — Jessie Koffi, Dec 02 '19 at 17:30

score 0 · Answer 1 · answered Dec 02 '19 at 17:27

Javascript is based on asynchronous so the only way to do this is to call all your logic inside the callback (because .then needs more time, and javascript doens't wait for it)

Axios.get(`/user/rooms?${token}`).then(res => {
    tmp.push(res.data)
    // this comes later so you can only get res.data in here
    const data = tmp
    const Rooms = [data]
    const RoomNames = []
})
// everything under here will be executed before .then

Akshay Bande · Answer 2 · 2019-12-02T18:06:14.000

Axios.get is a promise, which will get added to the event loop for execution. .then will act as a callback after data from your request is ready it will get executed.

In your code, you are accessing tmp to data before data from the request is added to tmp array.

let tmp = [];

Axios.get(`/user/rooms?${token}`).then(res => {

    tmp.push(res.data);
    const data = tmp
    const Rooms = [data]
    const RoomNames = []

})

For more about promises.

Cannot Access to Data from my API (Asynchronous problems)

2 Answers2