D'accord, j'ai donc un site Web qui doit afficher certaines données d'un fichier JSON. Le fichier contient différents endroits en Norvège avec leur nom (Halden), le numéro de l'État (kommunenummer), le nombre d'hommes (menn) et le nombre de femmes (kvinner).
J'ai besoin d'écrire un code qui affiche chaque nom, numéro d'état et la population totale de cet endroit (qui est la mesure la plus récente d'hommes + de femmes)
Les données JSON ressemblent à ceci:
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() {
}
}
Et ainsi de suite ... Le fichier JSON en contient beaucoup. L'attribut "elementer" est l'endroit où toutes les données sont stockées, donc quand j'ouvre "elementer" dans la console de mon navigateur, j'obtiens tous les états répertoriés.
C'est donc là que j'ai besoin des données JSON être affiché;
<div id="visOversikt">
<ul>
<li>hei</li>
</ul>
</div>
Mon JavaScript ressemble à ceci:
"elementer": {
"Halden": {
"kommunenummer": "0101",
"Menn": {
"2016": 15306,
"2017": 15473,
"2018": 15620
},
"Kvinner": {
"2016": 15238,
"2017": 15317,
"2018": 15417
}
}
La fonction displayOversikt () code > est l'endroit où je pensais pouvoir écrire le code pour afficher les données. Si quelqu'un peut aider, je l'apprécierais. Disons que j'écris getNames (befolkning.data.elementer) dans la console, j'ai répertorié tous les noms d'état (si cela peut vous aider).
4 Réponses :
essayez d'utiliser code> et divisez les données et affichez
<div ><ul id="content"></ul></div>
<template id="item">
<li>${name}, ${num}, ${population}</li>
</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);
Je l'ai fait en jquery simple.
Votre html
$(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)
});
});
})
Votre jquery (JsonView.js) serait
<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>
Tout d'abord, je suggérerais de regarder la fetch API . C'est une réelle amélioration par rapport à l'ancien style AJAX que vous utilisez.
Ensuite, je décomposerais le problème en trois phases:
fetch pour obtenir les données Voici à quoi cela pourrait ressembler:
<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>
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))
Il existe de nombreuses autres façons de créer votre HTML. Et vous devrez décider du format exact que vous souhaitez. Ici, j'utilise juste une liste non ordonnée avec des éléments qui ressemblent à Halden (# 0101): 31037 .
Déjà répondu ici 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);
partager la maquette de sortie finale?
Y a-t-il un nœud particulier que vous souhaitez afficher dans votre li ou vous devez afficher toutes les données de json?
J'ai besoin que toutes les données soient affichées. wildboy.uib.no/~tpe056/folk/104857.json Ce est la provenance des données JSON. Et j'ai besoin d'afficher tous les noms qu'il contient, comme "Halden", "Moss", comme vous pouvez le voir. De plus, j'ai besoin d'afficher le "kommunenummer" et la population ("menn" + "kvinner"). Cela devrait donc ressembler à ceci: "Halden, 0101, 31037" "Moss, 0104, xxxxx" Ou quelque chose comme ça.
sous "Menn" nous avons beaucoup d'année. donc u besoin de montrer dans ui li?
oui il y a de nombreuses années, mais nous avons juste besoin de la dernière année. so 2018 + femmes 2018
Si vous ne l'avez pas déjà fait, vous devriez envisager d'utiliser l'un des frameworks d'application Web tels que Angular ou React, mapper les données en HTML est ce qu'ils font
Au fait, mon professeur m'a dit de rechercher "document.createElement", ce qui serait utile ici. mais je ne peux pas le comprendre
La première chose que vous devez faire est de regarder quelles données vous avez et comment elles sont organisées. Ensuite, décidez comment vous voulez le présenter - peut-être un certain nombre de lignes par zone et que contient chacune? Ensuite, vous devez déterminer comment transformer les données de son organisation actuelle vers votre cible pour l'affichage (peut-être en utilisant un diagramme et / ou un pseudo code). Vous pouvez ensuite coder initialement la sortie vers la console. Enfin, la dernière partie, la création de tous ces éléments délicats et le formatage. P.S. c'est simple en html / js, je doute que votre professeur veuille que vous appreniez angular!
Étant donné qu'on vous a dit d'utiliser document.createElement, vous devriez faire ce qu'on vous dit! createElement fait exactement cela, il crée un élément pour vous. Il NE le place PAS dans l'arborescence DOM, vous devez le faire vous-même en l'ajoutant à une balise déjà présente, par exemple.
ou un autre que vous placez dans le html, par exemple@ lamalama69 Vous pouvez accepter une réponse (si cela vous aide) en cliquant sur le gros bouton à cocher gris sur son côté gauche. Si vous le souhaitez, vous pouvez ajouter +10 points à n'importe quel auteur de toute bonne réponse en cliquant sur le triangle gris supérieur