Fetch all data from json and display it on the index page

Question

I have the following 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"}
    ]
  }
]

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:

$.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();
});

Rocker1985 · Accepted Answer · 2016-04-18 09:09:17Z

1

You are setting the same UI elements (img and ul) twice inside a loop. When the loop runs first time, the values are set from the first array element. When the loop runs second time, the SAME elements are overwritten with the new values.

To properly display all elemts from the JSON array, you need two sets of UI elements in the index.html page e.g. two imgs, two uls etc.

answered Apr 18, 2016 at 9:09

Rocker1985

3121 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S.Hagvin Over a year ago

Thanks, i have understood. But perhaps isn't it correct make things like have done I? I can suggest if in json will be much sets of objects how I should do properly my index.html file. I think it isn't correct create html rely on json, isn't it? Maybe you can propose me another variant do this task?

Rocker1985 Over a year ago

You can loop through the json array to dynamically create UI elements, otherwise you can use some templating engine like Handlebars.js (handlebarsjs.com) to dynamically generate HTML from json.

S.Hagvin Over a year ago

Great thanks you for tips. I need something like this. Maybe I should use angular better? I do this task only for myself, I want trenning my javascript skills, but maybe I should use framework like angular? What do you think about it?

Collectives™ on Stack Overflow

Fetch all data from json and display it on the index page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related