Problem with Twitch.tv App, can't display offline channels

Work on this project was going smoothly until I got stuck. I am sure there is a simple explanation to my problem, but I can’t manage to work it out on my own.

I am making two separate calls to pull the data about streaming channels and the offline channels.

First of all for some reason even though I get the right data about streaming channels and I manage to display them on the page I still get an error in the console “TypeArror: stream.data is null” about the channels which are currently not streaming. I can’t understand why it’s happening.

Secondly, I am trying to push offline channels into a separate array, but it doesn’t work. Array remains empty at all times.

I created three arrays.

channelsArr - contains names of the channels I want to display on the page. I make a call to check for the streaming channels and trying to separate the online and offline channels into two other arrays.

onlineArr - gets names of the streaming channels after the request.

offlineArr is where I want to put channels’ names which are currently not streaming and this is where I’m stuck. I’m comparing a name from the channelsArr to a name from onlineArr and if the name from the channelsArr is not in the onlineArr I’m pushing it into offlineArr. I tried everything I could think of, using different approaches, but offlineArr remains empty.

Here is the link to the project: https://codepen.io/themalni/pen/jVLmQR

Hi,

the data.stream null error is because your reply has objects with different key and value pairs.

If you console.log(data) on line 96 in your code, you will see each reply. Some are different. Notice how there’s 4 errors? They’re the ones that are offline. I used an if/else statement in my code to differentiate and treat the objects accordingly.

Summary
function parse(displayIn, response) {
        /*console.log(response);
        console.log('in parse');*/
        // path is required because search, featured and favorites all have differing responses
        var path;
        if (response.hasOwnProperty('stream') && (response.stream !== null)) { //if channel is online {object}
            path = response.stream;
            $('.link-' + path.channel.name).attr("href", "https://www.twitch.tv/" + path.channel.name);
            $('#fave-' + path.channel.name).addClass('a-online');
            console.log(path.channel.name + ' is online - card build requested');
            buildCards(displayIn, path, response);
            sort();
        } else if (response.hasOwnProperty('stream') && (response.stream === null)) { //if channel is online {object}
            var channel = response._links.channel;
            var urlArray = channel.split('/');
            var urlName = urlArray[urlArray.length - 1];
            $('#fave-' + urlName).addClass('b-offline');
            $('.link-' + urlName).attr("href", "https://www.twitch.tv/" + urlName);
            console.log(urlName + ' is offline.');
            sort();
        } else if (response.hasOwnProperty('featured') && (response.featured.length !== 0)) { //if featured channel [array]
            for (var i = 0; i < response.featured.length; i++) {
                var featIsInIndex = userChannels.indexOf(response.featured[i].stream.channel.name);
                if (featIsInIndex == -1) {
                    path = response.featured[i].stream;
                    buildCards(displayIn, path, response);
                    console.log(path.channel.name + ' is online');
                } else {
                    //stop featured channel appearing if already loaded. Stops player controls not hiding on duplicate cards
                    console.log('The Featured channel ' + response.featured[i].stream.channel.name + ' is already in Faves so has not been displayed in the featured panel');
                }
            }
        } else if (response.hasOwnProperty('streams') && (response.streams.length !== 0)) { //if searched channel is online [array]
            for (var j = 0; j < response.streams.length; j++) {
                var searchIsInIndex = userChannels.indexOf(response.streams[j].channel.name);
                if (searchIsInIndex == -1) { //if not already displayed
                    path = response.streams[j];
                    buildCards(displayIn, path, response);
                } else { //if already displayed.Stops player controls not hiding on duplicate cards
                    console.log('The Featured channel ' + response.streams[j].channel.name + ' is already in Faves so has not been displayed in the search panel');
                }
            }
        } else if (response.hasOwnProperty('streams') && (response.streams.length === 0)) { // Nothing found in search
            alertUser('Nothing found for that search, try again');
            console.log('Nothing found for that search');

        } else { //catch all
            buildCards(displayIn, path, response);
        }

    }

This function basically just sorts out my responses from the search/channels/online/offline etc by way of IF/ELSE and then calls different functions to use that data.

Your code will hang on those errors so sort them and then go from there. You might find if you can get past that error all your other problems are solved! If not we’ll take another look :slight_smile:

Nice work so far btw. :thumbsup:

1 Like

Thanks a lot Mark for your help, somehow it made me look differently at my code and I solved the problem :blush:
Now I’m working on solution to display online, ofline and all channels onclick. What is strange is that it works, but for axample offline button hides only the last streaming channel enstead all of them. The same happens with online button, it hides only the last streaming channel :upside_down: