时间戳

首页 > 解决方案 > 使用 JSON 循环访问 URL

javascript - 使用 JSON 循环访问 URL

问题描述

我创建了一个页面来读取来自 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>

标签： javascriptjsonloops

解决方案

欢迎来到异步编程世界。

$.getJSON function是一个异步函数，当它从服务器获取数据并且网络请求可以按任意顺序完成时，它将调用您的回调，这意味着第一个请求可以在最后一个请求之后完成。

因此，要以与 dom 相同的顺序获取数据upstreamLevels，您可以等待请求完成并相应安排（就像我使用Promise.all所做的那样）或编写自定义逻辑以从数组索引更新 dom，例如，将结果推送到新数组，与 相同的索引upstreamLevels，并通过循环遍历结果数组来更新 dom。

<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而不是 $.getJSON，它的使用承诺。您可以使用反引号来构建字符串。

例如

`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>

推荐阅读