nested api calls when iterating over data

Question

I'm following the same steps as "A simplified approach to calling APIs with redux" to do api calls.

However i'm attempting to do a nested call when i get my results but the for loop is not waiting so my returned data is all in the wrong place. i'm using superagent in react to do this.

Thanks

here is my code

import request from 'superagent';
const dataService =

request
        .get('http://my-api.com/api/sets/coll_e8400ca3aebb4f70baf74a81aefd5a78/items/')
        .end((err, res) => {
            if (err) {
                return "error";
            }
            const data = JSON.parse(res.text);

        let sections = new Array(),
            section = null,
            episodes = null;

        for (var i = 0; i < data.objects.length; i++) {
            let type = data.objects[i].content_type.toLowerCase();

            if(type !== "episode") {
                if (section !== null) {
                    section.episodes = episodes;
                    sections.push(section);
                }
                section = new Object();
                episodes = new Array();
                section.header = data.objects[i].heading;
            }

            if(type === "episode") {
                var url = `http://my-api.com:8000${data.objects[i].content_url}`;
                request
                    .get(url)
                    .end((err, res) => {
                    const data2 = JSON.parse(res.text);

                    console.log("data2", data2);
                    var episode = new Object();
                    episode.title = data2.title;
                    episodes.push(episode);
                });
            }
        }

        section.episodes = episodes;
        sections.push(section);

        console.log("sections", sections);
    })

export default dataService

Edit: The issue is happening on the inner request where I’m getting the episodes. var url = http://my-api.com:8000${data.objects[i].content_url};

Answer 1

From your description I am still unsure where you need async. I will guess. But I would suggest you use Promise.all(). I will show an example below.

import request from 'superagent';
const dataService =

request
        .get('http://my-api.com/api/sets/coll_e8400ca3aebb4f70baf74a81aefd5a78/items/')
        .end((err, res) => {
            if (err) {
                return "error";
            }
            const data = JSON.parse(res.text);

        let sections = new Array(),
            section = null,
            episodes = null;

        Promise.all(for (var i = 0; i < data.objects.length; i++) {
            let type = data.objects[i].content_type.toLowerCase();

            if(type !== "episode") {
                if (section !== null) {
                    section.episodes = episodes;
                    sections.push(section);
                }
                section = new Object();
                episodes = new Array();
                section.header = data.objects[i].heading;
            }

            if(type === "episode") {
                var url = `http://my-api.com:8000${data.objects[i].content_url}`;
                request
                    .get(url)
                    .end((err, res) => {
                    const data2 = JSON.parse(res.text);

                    console.log("data2", data2);
                    var episode = new Object();
                    episode.title = data2.title;
                    episodes.push(episode);
                });
            }
        }).then(() => {
            section.episodes = episodes;
            sections.push(section);

            console.log("sections", sections);
          }


    })

export default dataService

UPDATE-----

Promise.all(if (type === "episode") {
    var url = `http://my-api.com:8000${data.objects[i].content_url}`;
    request
        //with superagent you can use promises like such.
        .get(url)
        .then((err, res) => {
            const data2 = JSON.parse(res.text);

            console.log("data2", data2);
            var episode = new Object();
            episode.title = data2.title;
            episodes.push(episode);
        });
}).then(() => {
    section.episodes = episodes;
    sections.push(section);

    console.log("sections", sections);
})