好的，我有一个网站需要显示 JSON 文件中的一些数据。该文件包含挪威不同地点的名称 (Halden)、州编号 (kommunenummer)、男性人数 (menn) 和女性人数 (kvinner)。
我需要写一些代码来显示每个名字、州编号和那个地方的总人口(这是最近的男性 + 女性测量值)
JSON 数据如下所示:
"elementer": {
"Halden": {
"kommunenummer": "0101",
"Menn": {
"2016": 15306,
"2017": 15473,
"2018": 15620
},
"Kvinner": {
"2016": 15238,
"2017": 15317,
"2018": 15417
}
}
等等... JSON 文件中有很多这样的内容。 “elementer”属性是存储所有数据的地方，因此当我在浏览器控制台中打开“elementer”时，我会列出所有状态。
所以这是我需要显示 JSON 数据的地方；
<div id="visOversikt">
<ul>
<li>hei</li>
</ul>
</div>
我的 JavaScript 看起来像这样:
function load(url, objekt){
var request = new XMLHttpRequest()
request.open('GET', url, true)
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200) {
console.log("Data er lastet inn vellykket...");
}
}
request.onload = function() {
// Begin accessing JSON data here
objekt.data = JSON.parse(this.response)
}
request.send()
}
var befolkning = {
}
load("http://wildboy.uib.no/~tpe056/folk/104857.json", befolkning)
function getNames(data) {
for (var variable in data) {
console.log(variable)
}
function displayOversikt() {
}
}
displayOversikt() 函数是我认为可以编写代码来显示数据的地方。如果有人可以提供帮助，我将不胜感激。假设我在控制台中写入 getNames(befolkning.data.elementer)，我列出了所有状态名称(如果有任何帮助的话)。
最佳答案
我已经用简单的 jquery 完成了。
你的html
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="JsonView.js"></script>
</head>
<body>
<div id="visOversikt">
<ul></ul>
</div>
</body>
</html>
你的 jquery(JsonView.js) 会是
$(document).ready(function(){
$.getJSON("http://wildboy.uib.no/~tpe056/folk/104857.json", function(json) {
$.each(json['elementer'],function(key,value){
var stateName = key;
var kommunenummer = value['kommunenummer'];
var MennValue = value['Menn']['2018'];
var FemaleValue = value['Kvinner']['2018'];
var addition = MennValue + FemaleValue;
var li = '<li>'+stateName+', '+kommunenummer+', '+addition+'</li>'
$("#visOversikt ul").append(li)
});
});
})
关于javascript - 通过 JavaScript 从 JSON 写入 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56005775/