How to iterate through JSON list and insert into HTML element?

Question

The data that is returned from the ajax request is like this:

Data = [
    ["18/02/2019", "A"],
    ["19/03/2019", "B"],
    ["21/05/2019", "C"],
]

The ajax request works perfectly and I have managed to store this in a variable called Data within a function.

success: function (Data) {
    for(i in Data) {
        // INSERT INTO HTML
    }
}

I have successfully iterated through Data to get each sublist. as i. How would I present this in my HTML? I have tried to use document.querySelectorAll('.Appointments').innerHTML = Data[i]; but is not working.

The expected outcome would be this on the webpage, where each row has its own divider.

18/02/2019 A
19/03/2019 B
21/05/2019 C

I am new to JSON so a detailed explanation would be greatly appreciated, thanks.

Possible duplicate of [Convert json data to a html table](https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) — Heretic Monkey, Feb 18 '19 at 18:59

kemicofa ghost · Accepted Answer · 2019-02-18T19:16:27.120

Issue with your code:

document.querySelectorAll('.Appointments').innerHTML

The above code that was provided doesn't make much sense. querySelectorAll returns a collection of HTML elements with the class name of "Appointments".

A collection doesn't have the method innerHTML, only HTML elements have that. What was the purpose of this?

It would be better to get an element by id.

for(i in Data) {
     // INSERT INTO HTML
}

The above code is an older way of looping through an array. There exists many methods for arrays now that are much better to use. I recommend you check out that list.

I'd recommend using Array#map and Array#join

Array#map:

Very useful for transforming an array of data to an array of HTML string.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Array#join:

Very useful to transform an array of HTML string into one whole string.

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

Solution:

Use Array#map and Array#join. This is something I use often and I find the most readable.

This solution also uses destructuring ( the part where [date, label] is used).

const data = [
    ["18/02/2019", "A"],
    ["19/03/2019", "B"],
    ["21/05/2019", "C"],
];

document.getElementById("appointments")
.innerHTML = data
//transform array of data to arrray of HTML string
.map(([date, label])=>(`<li>${date} : ${label}</li>`))
//transform array of HTML string to a single string of HTML
.join("");

<ul id="appointments"></ul>

Where in my code would I place this solution? I get a `Cannot set property 'innerHTML' of null` when I place it under `success:`. — nx_prv, Feb 18 '19 at 19:15
@nx_prv are you using my code? If so, do you have an HTML element with an `id` of "appointments" ? — kemicofa ghost, Feb 18 '19 at 19:17
It works - I just messed something else up and it's sorted. Thanks! — nx_prv, Feb 18 '19 at 19:23

Miguel Coder · Answer 2 · 2019-02-18T19:04:44.400

0

document.querySelector('#a').innerHTML = Data.map(arr => arr.join(' ') + '<br/>')

edited Feb 18 '19 at 19:04

answered Feb 18 '19 at 18:55

Miguel Coder

1,896
19
36

score 0 · Answer 3 · answered Feb 18 '19 at 18:56

You could use the code below.

const data = [
  ["18/02/2019", "A"],
  ["19/03/2019", "B"],
  ["21/05/2019", "C"],
]
let li, ul;

function createList(data) {
  for (let i of data) {
    ul = document.getElementById("list");
    li = document.createElement("li");
    li.innerHTML = i[0] + " " + i[1];
    ul.appendChild(li);
  }
}

createList(data);

<ul id="list"></ul>

How to iterate through JSON list and insert into HTML element?

3 Answers3

Issue with your code:

Solution: