Display all data from json response in HTML

Question

Here's an example JSON response. I would like to display each of these as search results in HTML. I'm thinking of a forEach loop however I can't wrap my head around how it would work. Example below.

"data": [{
      "CountryISO2": "US",
      "name": "Example",
      "Address1": "Example",
      "City": "example",
   },
   {

      "CountryISO2": "example",
      "name": "example",
      "Address1": "example",
      "City": "example",
   },

Javascript:

request = new XMLHttpRequest();.......

response = JSON.parse(request.responseText);

response.data.forEach(function(index) {
   const teamName = response.data.name; //the name in JSON
   const nameDiv = document.getElementById('clubname');
   nameDiv.innerHTML = teamName;
});

I would essentially like to display all the results for name on my page. I'm pretty new to JS. I can't use jQuery in my project.

you want to make a table? https://stackoverflow.com/a/61142336/8029211 — M A Salman, Apr 10 '20 at 18:25
if you use `forEach` you have to write your code another way. Please refer to https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach to learn the proper way to use `forEach`. — Pierre, Apr 10 '20 at 18:25
here, you pass a callback function to `foreach`, with a `index` argument, but never use it, and refer to the whole object being "looped"... — Pierre, Apr 10 '20 at 18:26
And also, IDs must be unique to a document, so you're setting the `innerHTML` of the same element in every iteration... — Heretic Monkey, Apr 10 '20 at 18:27
you should obtain `teamname` with `function(element){ var teamName = element.name }`, element being set at each loop turn with each object litteral from `data` property — Pierre, Apr 10 '20 at 18:27
There are many questions about building HTML from "JSON" (which is actually just arrays and objects once you run JSON.parse on it). Is there something you don't understand about those questions' answers? — Heretic Monkey, Apr 10 '20 at 18:29
You shouldn't only assign the index for the function but also assign the `currentValue` for the items in it like `response.data.forEach(function(currentValue,index)`. — Kunal Raut, Apr 10 '20 at 18:36

score 0 · Answer 1 · answered Apr 10 '20 at 18:43

You can create a new element in JS with: document.createElement("Element You Want To Create Goes Here")

You can than push what you want into this newly created element with ".innerHTML"

You will then need to append this created element to the body or it will just sit there.

Hope this helps friend.

Snippet


    data.forEach(function(index) {
            var newDiv = document.createElement("div");
            newDiv.innerHTML = index.name;
            document.body.appendChild(newDiv)
        })

Full Code

let data =  [
    {
    "CountryISO2": "US",
    "name": "Example",
    "Address1": "Example",
    "City": "example",
    },
    {

    "CountryISO3": "example",
    "name": "example",
    "Address1": "example",
    "City": "example",
    }
]


data.forEach(function(index) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = index.name;
    document.body.appendChild(newDiv)
})

Display all data from json response in HTML

1 Answers1