Guide on retrieving data from an axios promise in JavaScript

Question

Guide on retrieving data from an axios promise in JavaScript

I am struggling to manage the output of multiple lists retrieved through an axios API call made in JavaScript. I want to know how to effectively log the results and save them for future use, particularly for creating a data visualization.

Here is my current code:

const axios = require('axios');

var years = []
var totals = []
var rail = []
var bus = []
var para = []


const getTotal = async () => {
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    var totals = []
    try {
        let res = await axios.get(url);

        for (i = 0; i < res.data.length; i++) {
            totals.push(res.data[i].total);
            years.push(res.data[i].year);
            rail.push(res.data[i].rail);
            bus.push(res.data[i].bus);
            para.push(res.data[i].para);
        }

    }catch(error) {
        console.log(error);
      }
      return(totals,years,rail,bus,para) 
}

//data = axiosDataFetch().bus;
console.log(getTotal())

How can I display the contents of the 'totals' list here instead of it showing as undefined? I have made some changes based on feedback received, with the goal being able to access and utilize the five lists obtained from the API for data visualization purposes.

javascript axios

Answer 1

Answer №1

Make sure to include the await keyword before calling axios, then work with the response object (res) instead of using the .then method.

const axios = require('axios');

async function fetchAxiosData() {
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    var totals = []
    let res = await axios.get(url);

    for (i = 0; i < res.data.length; i++) {
        totals += res.data[i].total;
    }

    console.log(res.result) 
}

fetchAxiosData();

Javascript inherently operates in an asynchronous manner (e.g. the timing of the axios call's completion is uncertain, so it may not sync with your program).

To understand different methods of handling asynchronous behavior, check out this detailed article. Although lengthy, grasping its concepts will save you valuable time in the future.

Answer 2

Make sure to include the await keyword before calling axios, then work with the response object (res) instead of using the .then method.

const axios = require('axios');

async function fetchAxiosData() {
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    var totals = []
    let res = await axios.get(url);

    for (i = 0; i < res.data.length; i++) {
        totals += res.data[i].total;
    }

    console.log(res.result) 
}

fetchAxiosData();

Javascript inherently operates in an asynchronous manner (e.g. the timing of the axios call's completion is uncertain, so it may not sync with your program).

To understand different methods of handling asynchronous behavior, check out this detailed article. Although lengthy, grasping its concepts will save you valuable time in the future.

Answer 3

Answer №2

Make sure to log the totals from inside your then function. The issue is likely that your current log statement is being executed before axios finishes fetching the data.

const axios = require('axios');
const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

var totals = []
let res = axios.get(url)
    .then(result=>function(response){
        for (i = 0; i < response.data.length; i++) {

            totals += response.data[i].total;

          }
         console.log(totals); // include this line inside the 'then' block
    }
    )
    .catch(function (error) {
      console.log(error)
    });

Answer 4

Make sure to log the totals from inside your then function. The issue is likely that your current log statement is being executed before axios finishes fetching the data.

const axios = require('axios');
const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

var totals = []
let res = axios.get(url)
    .then(result=>function(response){
        for (i = 0; i < response.data.length; i++) {

            totals += response.data[i].total;

          }
         console.log(totals); // include this line inside the 'then' block
    }
    )
    .catch(function (error) {
      console.log(error)
    });

Answer 5

Answer №3

    const axios = require('axios');
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    const fetchData = async () => {
      var dataTotals = []
      try {
        let response = await axios.get(url);
        for (i = 0; i < response.data.length; i++) {
            dataTotals.push(response.data[i].total);
        }
        console.log(dataTotals);
      } catch(error) {
        console.log(error);
      }
      return dataTotals;
    }

Apologies for the confusion, I didn't realize that you needed to run the query at the top level, resulting in the pending response due to getTotals function returning a promise. To resolve this issue, use the following code:

fetchData().then(result => {
  console.log(result);
});

This is not a common occurrence as we usually have our code modularized, which means when imported, it is encapsulated within an IIFE.

Answer 6

    const axios = require('axios');
    const url="https://data.cityofchicago.org/resource/w8km-9pzd.json";

    const fetchData = async () => {
      var dataTotals = []
      try {
        let response = await axios.get(url);
        for (i = 0; i < response.data.length; i++) {
            dataTotals.push(response.data[i].total);
        }
        console.log(dataTotals);
      } catch(error) {
        console.log(error);
      }
      return dataTotals;
    }

Apologies for the confusion, I didn't realize that you needed to run the query at the top level, resulting in the pending response due to getTotals function returning a promise. To resolve this issue, use the following code:

fetchData().then(result => {
  console.log(result);
});

This is not a common occurrence as we usually have our code modularized, which means when imported, it is encapsulated within an IIFE.

Guide on retrieving data from an axios promise in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Error: Attempting to append a child to a non-existent property

Invalid for the purpose of storage

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

Combining ReactJS event handling for onClick and onKeyDown into a single handler for TypeScript

Having trouble making md-data-table directives function properly

What steps are involved in enabling Server Side Rendering with Next.js?

Is there a method to incorporate a click event for the confirm button in the ElMessageBox UI element?

What strategies can be implemented to decrease the value of the writing box by 2.5%?

I'm encountering an issue with my React 18 application using TypeScript: the module './App' cannot be found

Error encountered in Intellij for Typescript interface: SyntaxError - Unexpected identifier

"Explore the versatility of React Day Picker with customizable months and weekdays_long

Discover the best practices for utilizing CSS selectors reliably in puppeteer

Launching a web application directly from a USB drive

Enhanced Fancybox Version 2 adjusts iframe width to fit content

PHP Header Redirect Not Redirecting Correctly

Response coming from an ajax call in the form of a JSON

Guide on populating a textbox with values through Ajax or Jquery

Incorporating jquery-ui Datepicker with dynamic text input functionality

The onload function in jQuery is not functioning properly when the page is refreshed

Closing the React Material UI drawer with nested list items upon clickingORClicking on nested list