CODEWITHSUNDEEP
javascriptnode.jsdebuggingnpmaxios
kylel9506
kylel9506

Reputation: 131

How to save json returned from axios in a variable?

I want to save the json returned from axios into a variable. Currently I can only see it when I console.log(response.data) with the following code:

function status() {
  const url = "https://api.com";
  axios.get(url).then(function (response) {
    console.log(response.data);
  });
}
status(); // console.logs object successfully

If I just set response.data to a variable instead of logging it, it stays blank ( {} ). I want to do something like this:

let data = {};
function status() {
  const url = "https://api.com";
  axios.get(url).then(function (response) {
    data = response.data;
  });
}
status();
console.log(data); // {}
// I want to manipulate and use the properties of data in subsequent code here

How may I accomplish this please? Thank you for the help.

Upvotes: 7

Views: 11491

Answers (4)

Andres Abadia
Andres Abadia

Reputation: 833

Since a call to the API is async (takes some time to return an answer) you should wait for this answer before continuing with your code. Luckily js has a nice feature to do this with a nice syntax. It's commonly known as async/await

You just wrap your code in a async function which you call initially. Then update your status function to an async function to await for the axios response, hence await for the status function to finish populating your data variable.

(async () => {
  let data = {};
  async function status() {
    const url = "https://api.com";
    const response = await axios.get(url);
    data = response.data;
  }
  await status();
  console.log(data); // {...response.data}
  // Now you can manipulate and use the properties of data in subsequent code here
})()

Here a working example

Upvotes: 1

Rahul Bhobe
Rahul Bhobe

Reputation: 4451

The function axios.get(url) returns a Promise. You can use async/await like so.

 async function status() {
  const url = "https://api.com";
  let response = await axios.get(url);
  return response.data;
}

status().then((data) => console.log(data));

Upvotes: 5

Sachin Singh
Sachin Singh

Reputation: 948

Axios executes an asynchronous operation. Any async operation always executes after all synchronous operations are executed. Read about JavaScript execution here: https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec

Long story short, the console.log statement in the end is a sync operation which will always execute before axios(...).then callback.

JavaScript has a new feature however called async...await which allows you to run Promises in sequence like regular JavaScript statements. But please do note that it is still asynchronous execution in play.

async function status() {
  const url = "...";
  consr resp = await axios.get(url);
  return resp.data;
}

status().then(data => console.log(data));

In regular JavaScript this is equivalent to this:

function status() {
  const url = "...";
  return axios.get(url).then((resp) => {
    return resp.data;
  });
}

status().then(data => console.log(data));

Edit: To store an access data outside wrap everything inside a self executing async function and do the following:

(async () => {
  let data;
  function status() {
    const url = "...";
    return axios.get(url).then((resp) => {
      return resp.data;
    });
  }
  data = await status();
  console.log(data);
})();

Upvotes: 2

Cesar Wibaut
Cesar Wibaut

Reputation: 29

The axios.get(url) is an asynchronous method, which means it will not return the result but a Promise (an Object that means "It do not have the result, but I will get it eventually"). To get the result, you have to wait for it.

You have multiple options for that, the first one is using .then() (not really recommended)

axios.get(url).then((result) => {
  console.log(result);
});

The second one require using async/await. Async is used to define an asynchronous method, await is used to wait for an asynchronous method. You can only use await in an asynchronous method (as you.. well, have to wait).

const result = await axios.get(url);
console.log(result);

However, as said above, if you are in top module function (if you're not in a method for example, just right in your .js file), you can use immediately invoked function like this :

(async () => {
  const result = await axios.get(url);
  console.log(result);
)();

Et voilà !

Upvotes: 1

Related Questions