title: Fetch all data from json and display it on the index page
body: <p>I have the following json:</p>
  
  <pre><code>[
    {
      "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"}
      ]
    }
  ]
  </code></pre>
  
  <p>I need put it in my index.html, however I don't understand why I get only the second object? I need to put two objects in index. Maybe I need to use a loop? How do I do this properly? 
  I have the following javascript code:</p>
  
  <pre><code>$.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();
  });
  </code></pre>