Axios Returning Blank Objects

Ask us anything
1

All of the functions below either error out or return a blank object from the jsonplaceholder testing endpoint. Tested the URL in Postman and all results come back fine and it also works in HTTP.

const url = ‘https://jsonplaceholder.typicode.com/posts’;

async function fetchPhotos() {
try {
console.log(“Sending request to:”, url);
const response = await axios.get(url);
console.log(“Response received:”, response);
return response.data;
} catch (error) {
console.error(“Error during fetch:”, error);
return { error: error.message };
}
}

async function main() {
console.log(“Calling fetchPhotos…”);
const data = await fetchPhotos();
console.log(“Data returned:”, data);
if (data && data.error) {
console.log(‘Error:’, data.error);
} else if (data) {
console.log(‘Fetched Data:’, data);
} else {
console.log(‘No data fetched’);
}
}

main();

const url = ‘https://jsonplaceholder.typicode.com/posts’;

async function fetchPhotos() {
try {
const response = await axios.get(url);
return response.data; // Returns the data array from the response
} catch (error) {
console.error(error);
return { error: error.message }; // Returns an error object if the Axios call fails
}
}

// Correctly awaiting the async function
async function main() {
try {
const data = await fetchPhotos();
if (data.error) {
console.log(‘Error:’, data.error);
} else {
console.log(‘Data:’, data);
}
} catch (error) {
console.error(‘Error in main function:’, error);
}
}

main();

2

Reproduction videos:

3

usually the error itself can have better hints than a video, maybe share the error that you get as text.
And of course if this is in a js action you need to actually rerurn something from it. Think about it as the body of an async function, you want to return something, not only invoke other functions.

4

@dorilama The function below is returning a 200:
const url = ‘https://jsonplaceholder.typicode.com/posts’;

async function fetchPosts() {
try {
console.log(“Sending request to:”, url);
const response = await axios.get(url);
console.log(“Response received:”, response);
return response.data; // This will be an array of post objects
} catch (error) {
console.error(“Error during fetch:”, error);
return { error: error.message };
}
}

async function main() {
console.log(“Calling fetchPosts…”);
const data = await fetchPosts();
console.log(“Data returned:”, data);
if (data && data.error) {
console.log(‘Error:’, data.error);
} else if (data) {
console.log(‘Fetched Data:’, data);
} else {
console.log(‘No data fetched’);
}
}

main();

But the object that comes back is:

No data fetched
(Empty object)

No errors appear in the logs.

image
image1614×2028 292 KB

5

Yes, the return.response.data is in the function.

6

it is indeed in one of the function that you invoke but the action itself is not returning anything.
This is very easy once you get it. Forget about the actual data fetching and return a sample array, then add the fetching.

7

@dorilama

So this is now an exploratory guessing game? Any reason why you are not able to just share the solution?

8

The solution is to add a return statement from the root of your code, I literally said that 3 times now.
Here you go: return yourdata

FYI copy pasting lines of code is not a solution and it makes you waste time, understanding what you are doing it’s the solution. :wave:

9

This is still returning a blank object:

const url = ‘https://dummyjson.com/posts’;
const fetchPosts = async () => {
const response = await axios.get(url);
return response.data;
};
const data = await fetchPosts();

The example script itself provided by WeWeb is returning a blank object with https://dummyjson.com/posts

10

So does modifying the response to dot target posts instead of data:

const url = ‘https://dummyjson.com/posts’;

const response = await axios.get(url);

return response.posts;

The output JSON is:
{
“posts”: [
{
“id”: 1,
“title”: “His mother had always taught him”,
“body”: “His mother had always taught him not to ever think of himself as better than others. He’d tried to live by this motto. He never looked down on those who were less fortunate or who had less money than him. But the stupidity of the group of people he was talking to made him change his mind.”,
“userId”: 9,
“tags”: [
“history”,
“american”,
“crime”
],
“reactions”: 2
},
{…},
{…}
// 30 items
],
“total”: 150,
“skip”: 0,
“limit”: 30
}

11

@geenius-cloud You have two problems:

  1. The main() function lacks a return statement. You need return data after getting it from fetchPosts.
  2. The outer code lacks a return statement. You need to insert the word return before main(), e.g. `return main()

Take care of those and you’re probably good to go. Let us know if you have ongoing issues!

Also, @dorilama is the single most expert person on here who is not part of the weweb team. He is also the nicest in helping people with their hard problems. He is not paid to help on this community (nor am I). Let’s all be at least half as nice to him so we can keep this wheel of learning turning for all of us!

3 Likes
12

Thank you @raydeck and @dorilama, it now makes sense and works.

To be perfectly honest, I always prefer to side on the nice or neutral side, but I did see a couple of @dorilama responses in other threads and his tone there and in this thread made me feel small and somewhat “stupid”, with an overall “elitist” demeanor, and his responses certainly were not decorated with any kind of traditional social decorum, so my initial reaction was not the most positive to say the least.

Sure no one has to be nice or polite or provide any more info than necessary in contexts like this forum, but then one shouldn’t expect unequivocal niceties in return either :man_shrugging:t3:.

But again, thank you both for taking the time to help me work through this very basic and fundamental concept, and yes I complete agree that one should have an understanding of what is happening in the development process instead of just seeking copy/paste responses.