JSONからすべてのデータを取得し、インデックスページ上に表示

Question

私は、次のJSONを持っている：

[ 
    { 
    "countryId" : 0, 
    "countryImg" : "../img/france.jpg", 
    "countryName" : "France", 
    "countryInfo" : { 
     "headOfState" : "Francois Hollande", 
     "capital" : "Paris", 
     "population" : 66660000, 
     "area" : 643801, 
     "language" : "French" 
    }, 
    "largestCities" : [ 
     {"Paris" : "../img/paris.jpg"}, 
     {"Marseille" : "../img/marseille.jpg"}, 
     {"Lyon" : "../img/lyon.jpg"} 
    ] 
    }, 

    { 
    "countryId" : 1, 
    "countryImg" : "../img/germany.jpg", 
    "countryName" : "Germany", 
    "countryInfo" : { 
     "headOfState" : "Angela Merkel", 
     "capital" : "Berlin", 
     "population" : 81459000, 
     "area" : 357168, 
     "language" : "German" 
    }, 
    "largestCities" : [ 
     {"Berlin" : "../img/berlin.jpg"}, 
     {"Munich" : "../img/munich.jpg"}, 
     {"Hamburg" : "../img/hamburg.jpg"} 
    ] 
    } 
] 

私は唯一の第二の取得理由しかし、私は理解していない、私のindex.htmlにそれを置く必要がありますオブジェクト？インデックスに2つのオブジェクトを配置する必要があります。多分私はループを使用する必要がありますか？どのようにこれを正しく行うのですか？あなたが二回ループ内で同じUI要素（IMGとUL）を設定している

$.ajax({ 
    method: "POST", 
    url: "../data/data.json" 
}).done(function (data) { 
    /*console.log(data);*/ 
    localStorage.setItem('jsonData', JSON.stringify(data)); 
    var dataFromLocStor = localStorage.getItem('jsonData'); 
    var dataObject = JSON.parse(dataFromLocStor); 
    console.log(dataObject); 

    function Countries(){ 

     this.getCountries = function() { 
      var ulListElem = document.getElementById("list-of-teams").children, 
       imgCountry = document.createElement('img'); 

      for(country in dataObject){ 
       /*console.log(dataObject[team]['teamName']);*/ 

       imgCountry.setAttribute('src', dataObject[country]['countryImg']); 
       imgCountry.setAttribute("width", "400"); 
       imgCountry.setAttribute("height", "300"); 
       console.log(country); 

       ulListElem[0].innerHTML = dataObject[country]['countryId']; 
       ulListElem[1].innerHTML = dataObject[country]['countryName']; 
       ulListElem[2].appendChild(imgCountry); 
       ulListElem[3].innerHTML = dataObject[country]['countryInfo']['headOfState']; 
       ulListElem[4].innerHTML = dataObject[country]['countryInfo']['capital']; 
       ulListElem[5].innerHTML = dataObject[country]['countryInfo']['population']; 
       ulListElem[6].innerHTML = dataObject[country]['countryInfo']['area']; 
       ulListElem[7].innerHTML = dataObject[country]['countryInfo']['language']; 
      } 
     } 
    } 

    var countriesDate = new Countries(); 
    countriesDate.getCountries(); 
}); 

Answer 1

： は、私は、次のJavaScriptコードを持っています。ループが最初に実行されるとき、値は最初の配列要素から設定されます。ループが2回目に実行されると、SAME要素は新しい値で上書きされます。

JSON配列からすべてのelemを正しく表示するには、index.htmlページに2組のUI要素が必要です。 2つのimg、2つのulなど