Цикл хотя URL с JSON

Question

Я создал страницу для чтения телеметрических данных со станций мониторинга наводнений EA. Это работает, но результаты станции сортируются в случайном порядке, и важно, чтобы они сортировались в том же порядке, что и массив верхнего уровня. Чего мне не хватает?

function getLevels() {
  var upstreamLevels = new Array("L1206", "L1203", "L1202", "L1108", "L1103", "L1308");
  var measuresTable = "";
  var label = "";

  for (x = 0; x < upstreamLevels.length; x++) {

    $.getJSON("https://environment.data.gov.uk/flood-monitoring/id/measures/" + upstreamLevels[x] + "-level-stage-i-15_min-m/readings?_view=full&_sorted&_limit=3", function(json) {

      label = json["items"][0]["measure"]["station"]["label"];
      measuresTable = measuresTable + '<p>Station Name ' + label + '</div>';
      $("#measures").html(measuresTable);
    });
  }
}
window.onload = getLevels();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="measures"></div>

Answer 1

Добро пожаловать в мир программирования Asyn c.

$.getJSON function - это асинхронная функция c, она будет вызывать ваш обратный вызов, когда получит данные с сервера, и сетевой запрос может завершено в любом порядке, означает, что первый запрос может быть завершен после последнего.

Таким образом, чтобы получить данные в домене в том же порядке, что и upstreamLevels, вы можете подождать, пока запрос завершится, и организовать соответственно (как я использовал Promise.all ) или напишите пользовательские логики c, чтобы обновить dom из индекса массива, например, результат pu sh до нового массива с тем же индексом, что и upstreamLevels, и обновите dom через l oop через массив результатов.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="measures">loading...</div>       
<script>
function getLevels() {
var upstreamLevels = new Array("L1206", "L1203", "L1202", "L1108", "L1103", "L1308");
var measuresTable = ""; 
var label ="";
function httpGet(url) {
  return new Promise(function (resolve, reject) {
    return $.getJSON(url, resolve)
   });
}
var promises = upstreamLevels.map(function(u) {
  return httpGet("https://environment.data.gov.uk/flood-monitoring/id/measures/"+u+"-level-stage-i-15_min-m/readings?_view=full&_sorted&_limit=3")
})
Promise.all(promises)
.then(function(promiseResp) {
promiseResp.forEach( function(json) {
    label = json["items"][0]["measure"]["station"]["label"];
  measuresTable = measuresTable + '<p>Station Name ' + label + '</div>';
  $("#measures").html(measuresTable); 
})

})
}

window.onload = getLevels();
 </script> 

вы можете использовать fetch вместо $ .get JSON, обещание его использования. и вы можете использовать backtick для построения строки.

, например

`https://environment.data.gov.uk/flood-monitoring/id/measures/"${upstreamLevel}+"-level-stage-i-15_min-m/readings?_view=full&_sorted&_limit=3`

и measuresTable = ${measuresTable<p>Station Name ${label}</div>