CODEWITHSUNDEEP
javascriptjqueryhtmlcssjson
AndroidGL
AndroidGL

Reputation: 63

jQuery - Parse JSON from multiple urls and append to multiple divs

I got a HTML list with 4 items (each item has their own id assigned). For each item in list, I'm trying to get JSON data from multiple urls using ajax, then parse the data to the item's id.

Expected result: Each item gets the JSON data, then it displays the output inside its div element.

Actual result: Only one of the items are able to display the JSON data.

CODE: 

$(window).bind("load", () => {

    const urls = ["http://35.187.8.168:88", "http://35.187.8.168:89"];
    const ids = ["#serv1_players", "#serv2_players", "#serv3_players", "#serv4_players"];
    $.ajax({
        url: urls.pop(),
        dataType: "text",
        success: function (data) {
            var json = $.parseJSON(data);
            $(ids.pop()).html(json.current_players + " players");
        }
    });

});
.worlds-panel {
background-color: rgba(3, 155, 229, .37);
width: 184px;
margin: 2px;
border-radius: 10px;
padding: 5px 15px
}
ul.worlds-dropdown .selected, ul.worlds-dropdown li:hover {
background-color: rgba(16, 246, 136, .47);
width: 164px;
color: #fff;
}

ul.worlds-dropdown {
padding: 0;
margin: 0 0 0 -5px;
list-style-type: none
}

ul.worlds-dropdown li {
padding: 8px 16px;
border-radius: 6px;
line-height: 1.429;
-webkit-transition: .25s;
transition: .25s
}

ul.worlds-dropdown img {
display: block;
position: absolute;
width: 24px;
height: 24px;
margin-top: 4px
}

.worlds-text {
margin-left: 35px;
margin-top: 2px;
color: #fff
}

.tag {
margin-left: 123px;
position: absolute;
margin-top: -28px;
border-radius: 4px;
font-size: .65rem;
padding: 2px 4px;
text-align: center;
color: #fff;
background-color: #0091ea;
font-family: Ubuntu
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="worlds-panel">
<ul class="worlds-dropdown">
    <li onclick="setserver('35.187.8.168:443');">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">FFA</div>
        <div class="tag" id="serv1_players"></div>
    </li>
    <li onclick="setserver('35.187.8.168:444');" id="worldsDefault">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">Instant</div>
        <div class="tag" id="serv2_players"></div>
    </li>
    <li onclick="setserver('35.187.8.168:445');">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">Instant 2</div>
        <div class="tag" id="serv3_players"></div>
    </li>
    <li onclick="setserver('35.187.8.168:446');">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">Minions</div>
        <div class="tag" id="serv4_players"></div>
    </li>
</ul>
</div>

Upvotes: 1

Views: 706

Answers (1)

Matansh
Matansh

Reputation: 782

Loop through your urls, and make an AJAX call to each one.

try this:

$(window).bind("load", () => {
    const arr = [
        { id: 0, url: "http://35.187.8.168:88", container: "#serv1_players" },
        { id: 1, url: "http://35.187.8.168:89", container: "#serv2_players" },
        { id: 2, url: "http://35.187.8.168:90", container: "#serv3_players" },
        { id: 3, url: "http://35.187.8.168:91", container: "#serv4_players" }
    ];

    $.each(arr, function (index, obj) {
        $.ajax({
            url: obj.url,
            dataType: "text",
            success: function (data) {
                var json = $.parseJSON(data);
                $(this.container).html(json.current_players + " players");
            }.bind(obj)
        });
     });
});

Upvotes: 1

Related Questions