javascript - 使用另一个 JSON 从 JSON 中检索数据
问题描述
首先,Cities.json 里面有城市信息,检索信息,添加到 HTML,很简单。更难的任务是使用 citys.json 和城市列表 = ["New York", "London", "..."] 等,并将特定城市信息存储在 New York.json、London.json 等中。如何使用 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
},
]
解决方案
- 假设您有一个包含内容的站点文件夹:
- 索引.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>
推荐阅读
- python - 如何将捕获的输入从 tkinter 条目小部件写入 json 文件
- c# - 将焦点设置为 Xamarin 表单中的下一个条目
- php - 正则表达式检查字符串中特定单词后是否存在括号[包含字母数字字符]
- ios - Safari:输入元素上的光标未呈现透明
- c - 使用存储在 calloc 缓冲区中的数据
- outlook-addin - mail.item.displayReplyAllForm 打开的回复表单默认折叠
- python - 从列表格式的数据框列中删除重复项
- wordpress - Wordpress/htaccess 重写规则捕获父目录但不捕获子目录
- java - Amazon S3 REST API - 路径中有空格的资源
- sql - SQL SSIS - 循环容器循环通过 ETL 过程以获取 Varchar ID 以计算销售信息