<undefined:1 Get Http://localhost:63342/twitchtv/undefined 404 (not Found)>

After yesterday I solve the hoisting problem. Here is the post.This morning I get this 404 not found error message in console. And it's just like the page before. Still got many

Solution 1:

This is because your displayAll() function was executed before $.ajax promises returned. And allStreamInfo[j]["logo"] = data.logo; code like this in the success callback function must be undefined. Do read How do I return the response from an asynchronous call?. And you will know $.ajax's basic priciple. Here is my code:

    $(document).ready(function () {
        loadStreamInfo();
    });
    var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"zondalol"},{"user" :"aegabriel"}];
    functionloadStreamInfo() {
        for(var i = 0; i < 6; i++) {
            (function (j) {
                $.ajax({
                    url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user),
                    async: false,
                    jsonp: "callback",
                    dataType: "jsonp",
                    success: function (data) {
                        if(data.stream == null){
                            allStreamInfo[j]["status"] = "offline";
                        } else {
                            allStreamInfo[j]["status"] = "online";
                        }

                        $.ajax({
                            url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),
                            async: false,
                            jsonp : "callback",
                            dataType : "jsonp",
                            success: function (data) {
                                allStreamInfo[j]["logo"] = data.logo;
                                allStreamInfo[j]["gameName"] = data.game;
                                allStreamInfo[j]["views"] = data.views;
                                allStreamInfo[j]["followers"] = data.followers;
                                allStreamInfo[j]["url"] = data.url;
                                displayAll(j);
                            }
                        });
                    }
                });
            })(i)


        }
    }

    functiondisplayAll(i) {

            var outString = "";
            outString += "<div class='item'>";
            outString += "<img src='" + allStreamInfo[i].logo + "' alt='logo'>";
            outString += "<a href='" +allStreamInfo[i].url + "'><span id='gameName'>" + allStreamInfo[i].gameName +"</span></a>";
            outString += "<span id='state'>" + allStreamInfo[i].status+"</span>";
            outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[i].views + "</span></span>";
            outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[i].followers +"</span></span>";
            outString += "</div>";
            $("#result").append(outString);

    }

body {
    padding: 40px;
}

.toggle-button {
    width: 400px;
    color: white;
    height: 100px;
    text-align: center;
    margin: 0 auto;
}

.all {
    background-color: #6699CC;
    width: 30%;
    height: 70px;
    line-height: 70px;
    border-right: 2px solid grey;
    display: inline;
    float: left;
    cursor: pointer;
}

.online {
    cursor: pointer;
    line-height: 70px;
    background-color: cadetblue;
    border-right: 2px solid grey;
    width: 30%;
    height: 70px;
    display: inline;
    float: left;
}
.offline {
    cursor: pointer;
    background-color: darkorange;
    line-height: 70px;
    width: 30%;
    height: 70px;
    display: inline;
    float: left;
}

#result {
    margin-top: 30px;
}
.item {
    width: 500px;
    height: 70px;
    margin: 5px auto;
    background-color: #666699;
    border-left: 4px solid red;
    color: whitesmoke;
    /*border: 2px solid red;*/
}
a {
    text-decoration: none;
}
img {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 21px;
}

span#gameName,span#views-block,span#state ,span#follow-block {
    position: relative;
    bottom: 18px;
}

span#gameName,span#state,span#views-block{
    margin-right: 21px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="toggle-button"><divclass="all"onclick="displayAll()">All</div><divclass="online"onclick="displayOnline()">Online</div><divclass="offline"onclick="displayOffline()">Offline</div></div><divid="result"></div>

You must put the display() function in success callback. The only downside is you can't control which (function(j){...})(i) is executed first. That's because asynchronous.