Help with API Axios

JavaScript
1

Hi,

Last 2 days, I’ve been trying to create something ‘simple’ but unfortunatelly I couldn’t do it on my own.
Simply I want to create a function that returns me my data, and this function to have a parameter which will allow me to get the data object I want.

import axios from 'axios';
export let exercisesArr;
export const myData =  async (myElement) => {
	await axios.get('https://raw.githubusercontent.com/dbsimeonov/fitme-today/master/src/data/exercises.json')
		.then(function (response) {
		exercisesArr = response.data;
		})
		.catch(function (error) {
		console.log(error);
	});
	console.log(exercisesArr.myElement);
}

and I want to be called something like that myData(exercises)

I’m not sure why its not working, or my approach is right, so your help will be really appreciated :wink:

Thanks a lot.

2

Uhm, not sure about axios itself, but assuming is similar to fetch I would do something like:

export const myData =  async (myElement) => {
	return await axios.get('https://raw.githubusercontent.com/dbsimeonov/fitme-today/master/src/data/exercises.json')
		.then(function (response) {
		return response.data;
		})
		.catch(function (error) {
		console.log(error);
	});
	console.log(exercisesArr.myElement);
}

This way you should be able to have the response.data value exported into myData. I’m not fully sure about that but the lack of return's makes me suspect ^^

3

Unfortunatelly for some reason I can not make it run like that. Any ideas?

4

These are asynchronous calls. i.e. it’s not being executed from top-to-bottom as any other normal programming.

console.log(exercisesArr.myElement);

is being executed before the axios.get() has even finished… so therefore, exercisesArr.myElement will probably be undefined.

5

Like @Layer, not sure if there are any peculiarities re Axios, I only use fetch, but:

import axios from 'axios'

export async function myData(myElement) {
  try {
    const req = await axios('https://raw.githubusercontent.com/dbsimeonov/fitme-today/master/src/data/exercises.json');
    return req.data.exercises[myElement];
  } catch (err) {
    console.log(err)
  }
}

This thing still returns a promise, so you’'d use it like:

import { myData } from './myDataModule';

myData('abs').then(result => console.log(result))

and do whatever in that then

6

so when using async/await it is just shorthand for using then aka promises. they are doing the same thing so you would not want to use await AND then in the same thing. @DanCouper looks right to me.

in the original example you are exporting a function called myData that takes myElement as a parameter. I am a little confused since myElement isnt directly used by axios, but then again i dont know the use case.

later on your would import {myData} from '....' and the call myData(myElement).

this will return the entire piece of data you are requesting

import axios from 'axios'

export const myData async myElement => {
   try {
      const response = await axios('https://raw.githubusercontent.com/dbsimeonov/fitme- 
            today/master/src/data/exercises.json');
    return response.data

  } catch (err) {
    console.log(err)
  }
7

This is exactly what I needed, thanks a lot.

Just small issue, I know its async function but when I call it straight from my index.js it gives me error, if I call it thru setTimeout function, it returns me what I need, any chance we can fix this?

P.S second issue or question is, can you help me how I can do a loop or map function to return all the names from the Object?