List data on the screen

Question

I would like to use the map function in my agents variable but it is not available, can anyone tell me why?

code below:

axios(config).then(function (response) {
      agents = response.data;
      console.log('agents', agents);
    });
    // (agents.map) map function is not available here
  }

Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Nick Parsons, Jun 20 '20 at 15:11
No, I would like to know why I cannot use .map() in my variable agents — Paulo Rodrigues, Jun 20 '20 at 15:13

Vinayak Sarawagi · Accepted Answer · 2020-06-20T15:58:40.017

0

Javascript is async in nature. So whatever modification you do inside .then the function will only reflect inside the same scope.

So, whatever you want to do with the agent's value that you are receiving from API call should be done inside the then function only.

let agents = [];
axios(config).then(function(response) {
  agents = response.data;
  console.log("agents", agents);
  const mapAgents = agents.map(a => a.someProperty);
  console.log(mapAgents);
  // end of scope for the agent's value, it won't be accessible outside.
});
console.log(agents); // outputs []
// value of agent's won't be accessible here due to async nature. This line will get executed first and then.

async-await

If you wish to perform some action in a synchronous fashion. You can achieve it using async-await, it makes the inside of the function synchronous while keeping the execution of function as asynchronous.

const getAgents = async function() {
  let agents = []
  const res = await axios(config) // thread will wait till the api call is completed
  agents = res.data
  // perform your action here
}

getAgents(); // this will now become asynchronous

You can learn more about the Javascript async nature, here.

edited Jun 20 '20 at 15:58

answered Jun 20 '20 at 15:18

Vinayak Sarawagi

914
7
11

@PauloRodrigues, the code returns "agents.map is not a function" because the agents variable is inside the callback function(response){ ... } supplied to .then(). So it can not be accessible outside. – nithin_cs Jun 20 '20 at 15:32
so how can i do to turn it accessible outside? – Paulo Rodrigues Jun 20 '20 at 15:45
@nithin_cs so how can i do to turn it accessible outside? – Paulo Rodrigues Jun 20 '20 at 15:52
1

@PauloRodrigues I have updated my answer with one more example. You can have a look at it. – Vinayak Sarawagi Jun 20 '20 at 15:59
@paulo Rodrigues, vinayak has updated the answer which is the right way of accessing the variable outside – nithin_cs Jun 21 '20 at 18:05

List data on the screen

1 Answers1

async-await