Looping par les données du fichier JSON local pour la production en HTML

Question

VOICI l'échantillon des données JSON

{ 
    "elements" : [{ 
    "name": "Hydrogen", 
    "symbol": "H", 
    "number": 1, 
    "period": 1, 
    "category": "diatomic nonmetal ", 
    "atomic_mass": 1.008, 
    }] 
} 

Voici le code que j'ai écrit pour afficher les données

$(function(){ 

var btn = $('button'); 
btn.on('click',load); 

function load(){ 
    var fetch = new XMLHttpRequest(); 

    fetch.open('GET','elements.json',true); 
    fetch.onload = function() { 
     if(this.status == 200) { 
      var elem = JSON.parse(this.responseText); 
      var output = ''; 
      for (var i in elem) { 
       output += ` 
        <div> 
         <p>Name : ${elem.elements[i].name}</p> 
         <p>Symbol : ${elem.elements[i].symbol}</p> 
         <p>Number : ${elem.elements[i].number}</p> 
        </div> 
       `; 
      } 
      $('.data').html(output); 
     } 
    } 
    fetch.send(); 
} 

}); 

problème ->

J'ai un problème avec pour boucle ou n'importe quelle boucle d'ailleurs, sans boucle et l'insertion de la valeur de i manuellement dans elements[i] fonctionne parfaitement.

Answer 1

Le elem que vous obtenez n'est pas un tableau, c'est juste un objet avec un champ qui contient un tableau, c'est pourquoi vos boucles échouent. Vous devez parcourir elem.elements. Essayez ceci ...

fetch.onload = function() { 
    if(this.status == 200) { 
     var elem = JSON.parse(this.responseText); 
     var output = ''; 
     for (var i=0, l=elem.elements.length; i<l ; i++) { 
      output += ` 
       <div> 
        <p>Name : ${elem.elements[i].name}</p> 
        <p>Symbol : ${elem.elements[i].symbol}</p> 
        <p>Number : ${elem.elements[i].number}</p> 
       </div> 
      `; 
     } 
     $('.data').html(output); 
    } 
}