Problem Intro:

In my React app I'm making some API calls to Github to fetch some user data. In another function I call these functions and wait for it with Axios's .all() method.

I want to fetch the data and do something with it using .then() but the returned value is just an array with 2 times undefined

What is the expected thing to happen:

It should return me 2 player objects with profile infos in the profile key of the object and a score value in the score key of the object.

What is my app doing in a nutshell?

It fetches the data from 2 usernames and they can "battle" each other. It just fetches the score and the followers and returns a sum. At the end it (should) returns an array with 2 player objects already sorted with the winner in the first place (exampleArray[0]).

General information's It's an react app using ponents. It's really about one very tiny ponent and the helper functions in another file.

Here is where I call my custom function (the one returning undefined):

ponentDidMount() {
    const players = queryString.parse(this.props.location.search); //<== the usernames
    const playersArray = [players.playerOneName, players.playerTwoName];
    console.log(playersArray); // <== this logs the output as expected (an array with 2 usernames)

    battle(playersArray).then((data) => {   // <== the function it's all about
        console.log(data); // <== data is => [undefined, undefined];
    })
}

Next is the battle function from above that uses 2 other functions:

battle

export function battle(players) { // <== players aray with 2 usernames as string
return axios.all(players.map(getUserData)) // <== look 1 function below
    .then(sortPlayers) // <== two functions below
    .catch(handleError)
}

getUserData

let getUserData = (player) => {
axios.all([
    getProfile(player),
    getRepos(player)
]).then((data) => {
    return {
        profile: data[0],
        score: calculateScore(data[0], data[1])
    }
})
}

sortPlayers

let sortPlayers = (players) => {

return players.sort((a, b) => {
    return b.score - a.score;
})
}

Ok so they also use other functions but they are really not too plicated. Let me know when you need examples from the other little helpers too.

I tried it with placing the debugger in different spots in the code and console logged different things, but I can't e through (first time I'm really working with promises). Sitting now 2 hours in front of this tiny problem and I can't figure it out.

I think the problem lies somewhere in battle function itself or getUserData

At the end a little screenshot, what the output of my console.log looks:

Thanks in advance

Problem Intro:

In my React app I'm making some API calls to Github to fetch some user data. In another function I call these functions and wait for it with Axios's .all() method.

I want to fetch the data and do something with it using .then() but the returned value is just an array with 2 times undefined

What is the expected thing to happen:

It should return me 2 player objects with profile infos in the profile key of the object and a score value in the score key of the object.

What is my app doing in a nutshell?

It fetches the data from 2 usernames and they can "battle" each other. It just fetches the score and the followers and returns a sum. At the end it (should) returns an array with 2 player objects already sorted with the winner in the first place (exampleArray[0]).

General information's It's an react app using ponents. It's really about one very tiny ponent and the helper functions in another file.

Here is where I call my custom function (the one returning undefined):

ponentDidMount() {
    const players = queryString.parse(this.props.location.search); //<== the usernames
    const playersArray = [players.playerOneName, players.playerTwoName];
    console.log(playersArray); // <== this logs the output as expected (an array with 2 usernames)

    battle(playersArray).then((data) => {   // <== the function it's all about
        console.log(data); // <== data is => [undefined, undefined];
    })
}

Next is the battle function from above that uses 2 other functions:

battle

export function battle(players) { // <== players aray with 2 usernames as string
return axios.all(players.map(getUserData)) // <== look 1 function below
    .then(sortPlayers) // <== two functions below
    .catch(handleError)
}

getUserData

let getUserData = (player) => {
axios.all([
    getProfile(player),
    getRepos(player)
]).then((data) => {
    return {
        profile: data[0],
        score: calculateScore(data[0], data[1])
    }
})
}

sortPlayers

let sortPlayers = (players) => {

return players.sort((a, b) => {
    return b.score - a.score;
})
}

Ok so they also use other functions but they are really not too plicated. Let me know when you need examples from the other little helpers too.

I tried it with placing the debugger in different spots in the code and console logged different things, but I can't e through (first time I'm really working with promises). Sitting now 2 hours in front of this tiny problem and I can't figure it out.

I think the problem lies somewhere in battle function itself or getUserData

At the end a little screenshot, what the output of my console.log looks: http://prntscr./hz5abq

Thanks in advance

• javascript
• reactjs
• promise
• axios

Share Improve this question Follow edited Jan 11, 2018 at 19:45 GeraltDieSocke asked Jan 11, 2018 at 19:40 GeraltDieSockeGeraltDieSocke 1,62833 gold badges2525 silver badges5454 bronze badges 2

• 1 You need to debug your callbacks to find out where the data gets lost. I get that you already did this but in order to solve this we'd have to basically build a copy. Actually, nevermind, getUserData isn't returning the axios(). – user5734311 Commented Jan 11, 2018 at 19:44
• That kind sir fixed my problem. I don't know if should feel good or bad right now. Thx again. – GeraltDieSocke Commented Jan 11, 2018 at 19:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You don't have anything being returned in getUserData . Either add a return or remove the {} wrapping axios.all

let getUserData = (player) => {

    return axios.all([
        getProfile(player),
        getRepos(player)
    ]).then((data) => {
        return {
            profile: data[0],
            score: calculateScore(data[0], data[1])
        }
    })

}

getUserData needs to return the promise that it creates. At the moment it's not returning anything, so an implicit undefined is returned, and thus players.map(getUserData) results in an array of [undefined, undefined]

Ie, do this:

let getUserData = (player) => {
    // VVV added return statement
    return axios.all([
        getProfile(player),
        getRepos(player)
    ]).then((data) => {
        return {
            profile: data[0],
            score: calculateScore(data[0], data[1])
        }
    })
}