CODEWITHSUNDEEP
javascripthtmlcssjsonajax
nx_prv
nx_prv

Reputation: 127

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

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.

Upvotes: 3

Views: 449

Answers (3)

kockburn
kockburn

Reputation: 17616

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>

Upvotes: 3

Miguel Coder
Miguel Coder

Reputation: 1954

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

Upvotes: 0

Aniket G
Aniket G

Reputation: 3512

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>

Upvotes: 0

Related Questions