promise.all with forEach

Question

I have edited the question. Changed to syntax error and it is still not working. I'm using github api to get list of users and then for each user - to get his repos. My idea was to get all repos (which I got) and when it is all done, to put the allRepos array in the user object, and then to return the user object so I can render it. I've done it by foreach loop inside of Promise.all. I know I'm not using it correctly, because I can't use the .then() after the Promise.all. Is it possible to use the Promise.all the way I need or do I have to define the array I'm putting into it in advance? Help would be appreciated.

function onGetUsers() {
    // var prmUsers=getUsers()
    getUsers()
    .then(getrepos)
    .then(data=> console.log(data))//here i want to render the object

}
function getrepos(users){
    var usersObj={
        users: users,
    }
    var allRepos = []
        Promise.all(users.forEach(user => {
            var currUser = axios.get(user.repos_url)
                .then(data => allRepos.push(data)); 
            return currUser;
        })).then('here i want to put allRepos in the usersObj')
    return usersObj
    
}
function getUsers() {
    var prmRes = axios.get('https://api.github.com/users');
    var prmUsers = prmRes.then(res => {
        return res.data;
    });
    return prmUsers;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>Github Users</title>
</head>
<body>
    <button onclick="onGetUsers()">Get Users</button>
    <script src="lib/axios.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Oct 30 '18 at 15:03
do Promise.all([p1, p2, p3]).then() instead of Promise.all[].then( — Jameel Moideen, Oct 30 '18 at 15:05
I'm voting to close as your problem is a syntax error (`Promise.all` is a method, so should be called with parentheses, as @NinjaJami says). — Fenton, Oct 30 '18 at 15:07
you can also try like Promise.all(users.map(user => { return function () { axios.get(user.repos_url) } })).then((response)=>{ //response will be array allRepos=response; }); — Jameel Moideen, Oct 30 '18 at 15:41

score 0 · Accepted Answer · answered Oct 30 '18 at 15:10

function getrepos(users){
   let p = Promise.resolve(true);
    users.map(user => {
      p = p.then(() => axios.get(user.repos_url).then(userRepos => user.repos = userRepos));
    });
    return p.then(() => users);

}

With this method you will get the users object where each user will have repos property consisting of their repos. You just need to replace your one method with this one. In the final place you can loop through them and consolidate all repos in one array as well.

score 0 · Answer 2 · answered Oct 30 '18 at 15:47

Click button and wait for request to finish

function onGetUsers() {
// var prmUsers=getUsers()
getUsers()
    .then(getrepos)
    .then(data=> {
  console.log(JSON.stringify(data));
})

}
function getrepos(users){
const userPromises = users.map(user => {
  return axios.get(user.repos_url).then(userRepos => user.repos = userRepos);
});
return Promise.all(userPromises)
} 
function getUsers() {
  
var prmRes = axios.get('https://api.github.com/users');
var prmUsers = prmRes.then(res => {
  
    return res.data;
});
return prmUsers;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="js/index.js"></script>
    <title>Github Users</title>
</head>
<body>
    <button onclick="onGetUsers()">Get Users</button>
   
</body>
</html>

promise.all with forEach

2 Answers2