通过 JavaScript 从 JSON 写入 HTML答案

【问题标题】：Writing from JSON to HTML via JavaScript通过 JavaScript 从 JSON 写入 HTML
【发布时间】：2019-05-06 12:59:41
【问题描述】：

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

【问题讨论】：

分享最终输出模拟布局？
是否有任何特定节点要显示在您的 li 中，或者您需要显示所有来自 json 的数据？
我需要显示所有数据。 wildboy.uib.no/~tpe056/folk/104857.json 这是 JSON 数据的来源。而且我需要显示其中的所有名称，例如“Halden”、“Moss”，正如您在其中看到的那样。同样，我需要显示“kommunenummer”和人口（“menn”+“kvinner”）所以它应该看起来像这样：“Halden, 0101, 31037” “Moss, 0104, xxxxx” 或类似的东西。
在“Menn”下我们有很多年。所以你需要在ui li中显示？
是的，有很多年，但我们只需要最后一年。所以 2018 + 女性 2018

标签： javascript html json

【解决方案1】：

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

【讨论】：

【解决方案2】：

首先，我建议查看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 的元素。

【讨论】：

【解决方案3】：

已经在这里回复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);

【讨论】：

【解决方案4】：

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

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);

<div ><ul id="content"></ul></div>

<template id="item">
  <li>${name}, ${num}, ${population}</li>
</template>

【讨论】：