Question

好的，所以我有一个网站，需要显示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），我列出了所有状态名称（如果有帮助的话）。

Answer 1

尝试使用<template>拆分数据并查看

while (pass != 0)
    begin
        bool x = false;
        int prev = ∞;
        for (int i = 0; i < string_length; i++)
        begin
            if (prev == 0) then
                switch (string[i])
                    case 0:
                        break;
                    case 1:
                        string[i] = 0;
                        string[i-1] = 1;
                        prev = ∞;
                        x = true;
                        break;
            else
                prev = string[i];
            end if
        end
        if (!x) 
            break;
        pass = pass - 1;

    end

let data = {"elementer":{"Halden":{"kommunenummer":"0101","Menn":{"2016":15306,"2017":15473,"2018":15620},"Kvinner":{"2016":15238,"2017":15317,"2018":15417}},"Moss":{"kommunenummer":"0104","Menn":{"2016":16000,"2017":16085,"2018":16124},"Kvinner":{"2016":16182,"2017":16322,"2018":16464}}}}

function displayOversikt(data) { 
  let inject = (s,o)=>s.replace(/\${(.*?)}/g,(x,g)=>o[g]); // helper which inject object fields into string in ${filedname}

  // Prepare data 
  let dd= Object.entries(data.elementer).map(([x, y]) => {
    let year = Object.keys(y.Menn).sort((a,b)=>+b-a)[0]; // last year
    return {
      population: y.Menn[year] + y.Kvinner[year],
      num: y.kommunenummer,
      name: x,
  }});
 
  // Read templae string
  let t=item.innerHTML;

  // Bind data to template and write in content element
  content.innerHTML = dd.map(x=>  inject(t,x)).join('');
}

displayOversikt(data);

Answer 2

我已经用简单的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)
       });
   });
})

Answer 3

首先，我建议您查看fetch API。这是对您使用的较旧AJAX样式的真正改进。

然后，我将问题分为三个阶段：

使用fetch获取数据
重组数据以准确包含您想要的内容
将数据的每个元素格式化为HTML

这是一种可能的外观：

const output = document.getElementById('output')

const structureTownData = ([name, {kommunenummer, Menn, Kvinner}]) => ({
  name, 
  kommunenummer, 
  pop: Number(Menn['2018']) + Number(Kvinner['2018'])
})

const formatOutput = ({name, kommunenummer, pop}) => {
  const el = document.createTextNode(`${name} (#${kommunenummer}): ${pop}`)
  const li = document.createElement('li')
  li.appendChild(el);
  output.appendChild(li)
}

fetch("http://wildboy.uib.no/~tpe056/folk/104857.json")
  .then(resp => resp.json())
  .then(({elementer}) => Object.entries(elementer).map(structureTownData))
  .then(towns => towns.forEach(formatOutput))

<ul id="output"></ul>

<script>
data = {"elementer":{"Halden":{"kommunenummer":"0101","Menn":{"2016":15306,"2017":15473,"2018":15620},"Kvinner":{"2016":15238,"2017":15317,"2018":15417}},"Oslo kommune":{"kommunenummer":"0301","Menn":{"2016":328424,"2017":332578,"2018":335806},"Kvinner":{"2016":329966,"2017":334181,"2018":337663}}}}


// fake fetch for testing
const fetch = (url) => Promise.resolve(({json: () => data}))
</script>

有很多其他方法可以创建HTML。而且，您必须确定所需的确切格式。在这里，我只使用一个无序列表，其元素类似于Halden (#0101): 31037。

Answer 4

已经在这里https://stackoverflow.com/a/20135028/5525384

回答了

const div = document.getElementById('visOversikt');
function makeList(jsonObject, listElement){
    for(var i in jsonObject){
        var newLI = document.createElement('li');
        if  (jsonObject[i] instanceof Array){
            newLI.innerHTML=i;
        }
        else if (jsonObject[i] instanceof Object){
            newLI.innerHTML=i;
        }
        else {
            newLI.innerHTML=i+': '+jsonObject[i];
        }
        listElement.appendChild(newLI)
        if  (jsonObject[i] instanceof Array || jsonObject[i] instanceof Object){
            var newUL = document.createElement('ul');
            listElement.appendChild(newUL);
            makeList(jsonObject[i],newUL);
        }
    }
}
makeList(jsonObject, div);

通过JavaScript从JSON写入HTML

4 个答案: