I have an HTML list containing 4 items, each with its own assigned id. My goal is to retrieve JSON data from multiple URLs using AJAX for each item in the list and then parse the data into the respective item's id.
Expected outcome: Each item receives the JSON data and displays the output within its corresponding div element.
Actual outcome: Only one of the items successfully displays 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>