JavaScript: Returning array from recursive function

Question

I have made a class which builds some data from api:

const http = require("http");

class VideoService {

    constructor() {
        this.items = [];
    }

    fetchVideos(token = "") {

        const url = `https://www.example.com`;

        http.getJSON(url).then((results) => {
            results.items.forEach((item, index) => {
                const vid = item.snippet.resourceId.videoId;

                this.items.push({
                    title: item.title,
                    date: item.publishedAt
                });

                console.log(this.items.length); // here length inreases, works here
            });

            if (typeof results.nextPageToken !== "undefined") {
                return this.fetchVideos(results.nextPageToken);
            }

        });
    }

    getVideos() {
        this.fetchVideos();

        console.log(this.items.length); // this returns 0 instead of all items fetched

        return this.items;
    }

}

module.exports = VideoService;

In another file, I am using it like this:

const videoService = require("../shared/videoService");

const videos = (new videoService()).getVideos();
console.log(videos);

The last console.log call always returns empty array instead of all data collected in items property of the above class.

Can anybody tell what I am missing here?

Yeah so your function fetchVideos() has an http call which will be processed asynchronously. I suggest using something like a Promise or an Observable. You can read more about Promises here. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — lloydaf
– lloydaf, Commented Nov 22, 2018 at 13:52
To elaborate: the calls to .getJSON() return immediately, before the response to the underlying HTTP request has been received. — Pointy
– Pointy, Commented Nov 22, 2018 at 13:53
@Pointy: Thanks but I am rather new to promises stuff I cannot understand how to modify this code to use promises. I will love to see fix in an answer so I can accept it. Thanks — dev0010
– dev0010, Commented Nov 22, 2018 at 13:55
Your main issue is that you're not return a (resolved) Promise at the end of the recursion. — Alnitak
– Alnitak, Commented Nov 22, 2018 at 14:00
Maybe the following answer can help you out in making requests based on result of previous request. — HMR
– HMR, Commented Nov 22, 2018 at 14:02

lloydaf · Accepted Answer · 2018-11-22 17:52:46Z

1

This happens because in your function fetchVideos(), you are making an http call which will be processed asynchronously. You can try to process it this way.

fetchVideos(token = "") {

    const url = `https://www.example.com`;

    return http.getJSON(url).then((results) => {
        results.items.forEach((item, index) => {
            const vid = item.snippet.resourceId.videoId;

            this.items.push({
                title: item.title,
                date: item.publishedAt
            });

            console.log(this.items.length); // here length inreases, works here
        });

        if (typeof results.nextPageToken !== "undefined") {
            return this.fetchVideos(results.nextPageToken);
        }
        else return new Promise((resolve, reject)=>{
          resolve();
        });

    });
}

getVideos() {
    return this.fetchVideos().then(function(){
       console.log(this.items.length); // this returns 0 instead of all items fetched
    return this.items;
    });
}

I suggest reading about promises and asynchronicity in javascript. Check this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

edited Nov 22, 2018 at 17:52

answered Nov 22, 2018 at 13:56

lloydaf

6053 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pointy Over a year ago

This is a good start, but things are much complicated by the fact that further HTTP requests are initiated in the callback in fetchVideos().

lloydaf Over a year ago

@Pointy nice catch. I did not notice that before.

dev0010 Over a year ago

@LloydFrancis: It still does not work as expected, console.log does not show any results.

Alnitak Over a year ago

The fetchVideos function is failing to return a Promise at the end of the chain of recursive calls

Collectives™ on Stack Overflow

JavaScript: Returning array from recursive function

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related