使用另一个 JSON 从 JSON 检索数据

Question

首先，Cities.json里面有城市信息，检索信息，添加到HTML，很简单。 更难的任务是使用 city.json 与城市列表仅 = ["New York", "London", "..."] 等以及存储在纽约的特定城市信息。json, London.Z466DEEC76ECDF2454Z 等 HowDD54Z 等使用 city.json 从 New York.json 检索数据？

let request = new XMLHttpRequest();
request.open('get', `cities.json`);
request.responseType = "json";
request.onload = () => {
    let show = document.getElementById("box");
    for (let object of request.response) {
        box.innerHTML += `<p>
<a href="https://en.wikipedia.org/wiki/${object.name}">${object.name}</a>
<br>
population: ${object.population}
<br>
area: ${object.area}
</p>`;
    }
}
request.send();

New York.json = 
[
    {
        "name": "New York",
        "population": some integer,
        "area": some integer
    },
]

Answer 1

假设您有一个包含内容的站点文件夹：

索引.html
city.json {“城市”：[“纽约”，“伦敦”]}
newYork.json {“名称”：“纽约”，“人口”：999，“区域”：232 }
london.json {“名称”：“伦敦”，“人口”：999，“区域”：232 }
...

您必须找到一个应用程序服务器来为某个端口上的文件夹提供服务：
示例： https://www.npmjs.com/package/light-server
命令：轻服务器 -s。 -p 8000
浏览器：http://localhost:8000 将渲染 index.html
您还可以使用 fetch 发送 HTTP 请求并接收响应。

    <html>
    <body>
    <div id="data"></div>
    <script>
        function render(city, data) {
            let name = data.name;
            let population = data.population;
            let element = document.createElement("div");
            element.innerHTML = city + "=> name:" + name + ", population: " + population
            document.getElementById("data").append(element);
        }
        fetch("/cities.json").then(response => {
            response.json().then(json => {
                let cities = json.cities;
                cities.forEach(city => {
                    fetch("/" + city + ".json").then(cityResponse => {
                        cityResponse.json().then(cityJson => {
                            render(city, cityJson)
                        })
                    })
                })
            })
        })
    </script>
    </body>
    </html>

<html>
<body>
  <div id="data"></div>
  <script>
    function render(city, data) {
      let name = data.name;
      let population = data.population;
      let element = document.createElement("div");
      element.innerHTML = city + "=> name:" + name + ", population: " + population
      document.getElementById("data").append(element);
    }
    let citiesRequest = new XMLHttpRequest();
    citiesRequest.onload = function () {
      let json = JSON.parse(this.responseText);
      let cities = json.cities;
      cities.forEach(city => {
        let cityRequest = new XMLHttpRequest();
        cityRequest.onload = function () {
          let cityJson = JSON.parse(this.responseText);
          render(city, cityJson);
        }
        cityRequest.open("GET", "/" + city + ".json", true);
        cityRequest.send();
      })
    }
    citiesRequest.open("GET", "/cities.json", true);
    citiesRequest.send();
</script>
</body>
</html>

使用另一个 JSON 从 JSON 检索数据

问题描述

1 个解决方案

解决方案1
0 2021-02-04 18:25:50

使用另一个 JSON 从 JSON 检索数据

问题描述

1 个解决方案

解决方案1 0 2021-02-04 18:25:50

解决方案1
0 2021-02-04 18:25:50