CODEWITHSUNDEEP
javascriptarrayspromisees6-promise
user12092
user12092

Reputation: 39

Javascript class returning different values in console.log

I have the following classes (unnecessary details cut out here to make it more readable):

class CollectionManager {
constructor(){
    this.collectionList = {};
}
initialize(collections){
    ...
}
populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        collection.populateVideos();
    }));
}
}

.

class Collection {
constructor(data){
    this.collectionInfo = data;
    this.videoArray = [];
}
populateVideos(){
    var collectionKey = this.collectionInfo.COLLECTIONID;
    var vChannels = Object.keys(this.collectionInfo.channels);
    return Promise.all(vChannels.map(requestVideos))
        .then(function (results) {
            var videoIdArray = [];
            return videoIdArray = [].concat.apply([], results);
        }).then(function(arrVideoIds){
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        }).then(function(chunkedArrVideoIds){
            return Promise.all(chunkedArrVideoIds.map(requestVideoData)).then(function (results) {
                var videoTileArray = [].concat.apply([], results);
                collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
                return videoTileArray;
            });
        });
}
displayCollection(){
    console.log(this.collectionInfo.COLLECTIONID);
    console.log(collectionManager.collectionList);
    console.log(collectionManager.collectionList[1]);
    console.log(collectionManager.collectionList[1].videoArray);

And I call these classes like I would any normal promise.

collectionManager.populate().then(
    function(){
        collectionManager.displayCollections()
    }
);

Now my problem is that when I call this code and read what is on the console, the videoArray is completely empty in the 4th console log. collectionManager.collectionList[1] contains a full object that has a videoArray with a length of 100 with all of my videos properly inside of it. But if I call collectionManager.collectionList[1].videoArray it is empty like it hasn't been filled. As far as I'm aware those should be calling the same exact place but it is giving different results.

Does anyone see where I messed up?

Upvotes: 0

Views: 65

Answers (2)

Jaromanda X
Jaromanda X

Reputation: 1

In the populate function, your Promise.all ... map is returning an array of undefined, which would be immediately resolved by Promise.all

You should do as follows

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        return collection.populateVideos();
    }));
}

but, as you are using Class - you're already using more modern javascript

so

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(key => collectionManager.collectionList[key]);
    return Promise.all(collectionObjs.map(collection => collection.populateVideos()));
}

Would be quite acceptable

as an aside, your class Collection can also be made cleaner (in my opinion) using arrow functions, and better promise chaining

class Collection {
    constructor(data) {
        this.collectionInfo = data;
        this.videoArray = [];
    }
    populateVideos() {
        var collectionKey = this.collectionInfo.COLLECTIONID;
        var vChannels = Object.keys(this.collectionInfo.channels);
        return Promise.all(vChannels.map(requestVideos))
        .then(results => [].concat.apply([], results))
        .then(arrVideoIds => {
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        )
        .then(chunkedArrVideoIds => Promise.all(chunkedArrVideoIds.map(requestVideoData)))
        .then(function(results) {
            var videoTileArray = [].concat.apply([], results);
            collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
            return videoTileArray;
        });
    }
    displayCollection() {
        console.log(this.collectionInfo.COLLECTIONID);
        console.log(collectionManager.collectionList);
        console.log(collectionManager.collectionList[1]);
        console.log(collectionManager.collectionList[1].videoArray);
    }
}

Upvotes: 1

Aaron Pool
Aaron Pool

Reputation: 489

I would avoid console.log() debugging, unless you really want to frustrate yourself. This could be a simple matter of console.log() not behaving as you expect. Instead, I would suggest puttting a debugger statement in displayCollection(). All you have to do is literally add the line debugger; into the code of that function and have chrome dev tools open when you run it. Execution will halt on that line and allow you to inspect application state with chrome dev tools(or the dev tools of whatever browser you're using). Based on the four print statements you have there, I think it might just be that it's not printing as you expect.

Upvotes: 0

Related Questions