Question

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


            }

            for(var i = 0; i < 6; i++) {
                (function (j) {
                    $.ajax({
                        url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),
                        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;
                        }
                    });
                })(i)

            }

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

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;
}

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

    <div id="result">

    </div>

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 undefine in page.In debug window, I found every $.ajax request works well. I don't know why.

`Error_state_photo` -> **Sorry! We're busy running around with our hair on fire because Imgur is over capacity! This can happen when the site is under a very heavy load, or while we're doing maintenance.** - this is why you should include all relevant information in the question itself, not rely on external sites ... also, images are lazy — Jaromanda X, Dec 13 '16 at 04:45
you run loadStreamInfo but are NOT waiting for it to complete before running displayAll - you need to wait for asynchronous code to complete — Jaromanda X, Dec 13 '16 at 04:47
@JaromandaX I'm a new fresher. Would you please tell me how to solve the problem in details. — Lewis, Dec 13 '16 at 04:52
Nevermind my previous comment (deleted) I read the code all wrong — Jaromanda X, Dec 13 '16 at 05:03
@JaromandaX Yes, I need `https://wind-bow.gomix.me/twitch-api/streams/` to get the stream status `online` or `offline`. And I use `https://wind-bow.gomix.me/twitch-api/channels/` to get the stream `logo...` which is unavailable when stream is offline. [Twitch API](https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#if-offline). So I have to call `https://wind-bow.gomix.me/twitch-api/` twice — Lewis, Dec 13 '16 at 05:05
Oh right ... the only issue you seem to have is that the logo is undefined when user is offline!! as you say, logo is unavailable ... so check if `allStreamInfo[j].logo === undefined` and do something appropriate if it is (say, an `offline` image you create yourself?) — Jaromanda X, Dec 13 '16 at 05:08

score 0 · Accepted Answer · edited May 23 '17 at 12:24

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"}];
    function loadStreamInfo() {
        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)


        }
    }

    function displayAll(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;
}

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

<div id="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.

1 Answers1

Linked