jQuery - 複数のURLからJSONを解析し、複数のdivに追加

Question

4つのアイテム（各アイテムには独自のIDが割り当てられています）のHTMLリストがあります。リスト内の各アイテムについて、私はajaxを使用して複数のURLからJSONデータを取得しようとしており、そのデータをアイテムのIDに解析しています。

期待される結果：各項目はJSONデータを取得し、それはそのdiv要素内の出力を表示します。

実際の結果：いずれかの項目のみがJSONデータを表示できます。

CODE：あなたのURLを経由

$(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>

Answer 1

ループ、およびそれぞれにAJAX呼び出しを行います。

この試す：https://developer.mozilla.org/en-US（[ループと反復MDN]

$(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) 
     }); 
    }); 
});