Axios - zapytanie w zapytaniu, dodawanie response do tablicy

Question

var output = [];
    axios.get(`url`)
        .then(response => {            
          let array = response.data           
            array.map((item) => {
                axios.get(`url/${item.id}`)
                    .then(function (response) {                      
                        output.push(respone.data)                       
                    })
            })
        })       
        .then(() => {
            res.send(output);
        })

Wywołuje zapytanie, które zwraca mi tablice danych. Dla każdego elementu w tej tablicy chcę wywołać kolejne zapytanie, a jego odpowiedź zapisać do tablicy, aby po skończeniu całego procesu móc zwrócić sobie tą wypełnioną tablice. 

Ten sposób zawraca mi pustą tablice.

Czy jest ktoś w stanie pomóc? Z góry dzięki. 

Comments

Ten sposób zawraca mi pustą tablice.

W którym miejscu sprawdzasz zawartość tablicy?

Czy w konsoli nie ma błędu? W linijce 8 jest zbędny nawias kwadratowy "]" -> output.push(respone.data])  - chyba, że pushujesz tablicę, to dodaj jeszcze "[" przed response.data.

---

To literówka podczas pisania posta. Chodzi mi o sposób a nie o sam kod. (Kod nie generuje błędów)

---

Ponawiam pytanie - w którym miejscu sprawdzasz zawartość tablicy? Czy kod w 13 linijce wykonuje się?

Wrzuć całe array.map w nowy Promise (poprzedź to słówkiem return) i wywołaj resolve po output.push() w ostatniej iteracji.

---

Tak, wykonuje się, zwraca pustą tablice. Wydaje mi się, że kod z 13 linii wykonuje się najpierw a dopiero potem z 8 linii

---

Chodzi mi o to w jaki sposób mogę wrzucić dane z wewnętrzengo zapytania do tablicy i po zakończeniu wszystkich zapytań zwrócić tablicę z danymi?

---

var output = [];
    axios.get(`url`)
        .then(response => {            
           return new Promise((resolve) => {
               let array = response.data           
               array.map((item, index) => {
                   axios.get(`url/${item.id}`)
                       .then(function (response) {
                           console.log('fetched response.data: ', response.data);
                           output.push(respone.data);
                           if (index === array.length - 1) {
                               resolve();
                           }
                       })
                })
           });
        })       
        .then(() => {
             console.log('output: ', output);
            res.send(output);
        })

Czy ten kod działa? Co wypisywane jest w konsoli?

---

app.get('/friends/:id', function (req, res) {
    var output = [];
    axios.get(`http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=${STEAM_API_KEY}&steamid=${req.params.id}&format=json`)
        .then(response => {
            //console.log(response.data);
            // res.send(JSON.stringify(friends));
            let promise = new Promise((resolve) => {
                let friends = response.data.friendslist.friends;
                console.log("Friends", friends.length);
                friends.map((friend, index) => {
                    axios.get(`http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${STEAM_API_KEY}&steamids=${friend.steamid}`)
                        .then(function (response) {
                            //res.send(JSON.stringify(response.data))
                            //console.log(response.data.response.players[0]);
                           // console.log('fetched response.data: ', response.data.response);

                            output.push(response.data.response.players[0]);
                            if (index === friends.length-1) {
                                resolve(output);
                            }
                        });

                });

            });
            promise.then(o => {
                console.log(o.length);
                res.send(o)
            });
        })
});

Teraz, za każdym razem kiedy wywołuje ten skrypt, mam inną liczbę danych w tablicy. Nie dodały się do tablicy wszystkie wyniki tego wewnętrznego zapytania.

---

 za każdym razem kiedy wywołuje ten skrypt, mam inną liczbę danych w tablicy

W tablicy output?

Nie dodały się do tablicy wszystkie wyniki tego wewnętrznego zapytania

Wyniki ostatniego zapytania, to te w response z 12 linijki? Czy za każdym razem response.data.response.players[0] zawiera dane? Jaka jest zawartość tablicy output już w 27 linijce?

---

Tak, w tablicy output.

 

Tak, z linii 12. Za każdym razem tam coś jest.

 

W 27 linii zawartość output jest za każdym razem różna. Raz są 3 elementy, raz 20, a za kolejnym razem 15. Powinni być 30.

---

Czy w 27 linijce wyświetla się ta sama ilość elementów dla tablicy output, co w 9 linijce dla tablicy friends? W 18 linijce jest warunek:

if (index === friends.length-1) {

, który zostaje spełniony, bo Promise jest rozwiązywany. Czyli tablica output powinna mieć tą samą liczbę elementów, co friends. Sprawdź więc, czy do friends (8 linijka) zawsze przypisujesz te 30 elementów.

---

Tak, tablica friend ma zawsze taką samą liczbę elementów i chcę aby w tablicy output też było tyle samo, ale niestety nie jest.

Za każdym razem, kiedy wywołuje zapytanie, to do tablicy output zapisuje się inna liczba elementów.

---

Wydaje mi się, że Promise kończy się szybciej niż zdąży zapisać wszystkie elementy do tablicy output

---

Udało mi się rozwiązać to w taki sposób

app.get('/friends/:id', function (req, res) {    
    axios.get(`http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=${STEAM_API_KEY}&steamid=${req.params.id}&format=json`)
        .then(response => {
            //console.log(response.data);
            // res.send(JSON.stringify(friends));
            let friends = response.data.friendslist.friends;
            let promiseArr = friends.map(friend => fetch(`http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${STEAM_API_KEY}&steamids=${friend.steamid}`).then(res => res.json()));
            Promise.all(promiseArr).then(response => {
                /* do something with res here... */
                console.log(response.length);
                res.send(response)
            })  
        })
});