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.

Answer 1

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> 

Answer 2

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

Answer 3

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>