Exploring ways to loop through a JSON array and embed it into an HTML element

Question

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows:

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

The ajax request was successful and the data is stored in a variable named Data within a function.

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

I have managed to iterate through Data and access each sublist as i. But I am struggling with how to display this in my HTML. I tried using

document.querySelectorAll('.Appointments').innerHTML = Data[i];

but it's not working.

The desired result should be displayed on the webpage, with each row having its own division:

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

Being new to JSON, I would greatly appreciate a detailed explanation. Thank you.

javascript html css json ajax

Answer 1

Answer №1

Problem with the provided code:

document.querySelectorAll('.Appointments').innerHTML

The code above doesn't seem correct. querySelectorAll returns a collection of HTML elements with the class name "Appointments". However, a collection does not have the method innerHTML; only individual HTML elements possess this method. What was the intention behind this code?

It would be more suitable to target an element by its id.

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

The code above demonstrates an outdated method of looping through an array. There are now more efficient methods available for arrays. I suggest exploring the options provided.

I recommend utilizing Array#map and Array#join

Array#map:

Highly effective for transforming an array of data into an array of HTML strings.

The map() method creates a new array by executing a function on each element in the original array.

Array#join:

Perfect for converting an array of HTML strings into a single cohesive string.

The join() method joins array elements into a string using a chosen separator. If the array contains only one item, that item will be returned as is.

Solution:

Implement Array#map and Array#join. This approach is both efficient and easy to read.

This solution also involves destructuring (as seen in [date, label]).

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

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

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

Answer 2

Problem with the provided code:

document.querySelectorAll('.Appointments').innerHTML

The code above doesn't seem correct. querySelectorAll returns a collection of HTML elements with the class name "Appointments". However, a collection does not have the method innerHTML; only individual HTML elements possess this method. What was the intention behind this code?

It would be more suitable to target an element by its id.

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

The code above demonstrates an outdated method of looping through an array. There are now more efficient methods available for arrays. I suggest exploring the options provided.

I recommend utilizing Array#map and Array#join

Array#map:

Highly effective for transforming an array of data into an array of HTML strings.

The map() method creates a new array by executing a function on each element in the original array.

Array#join:

Perfect for converting an array of HTML strings into a single cohesive string.

The join() method joins array elements into a string using a chosen separator. If the array contains only one item, that item will be returned as is.

Solution:

Implement Array#map and Array#join. This approach is both efficient and easy to read.

This solution also involves destructuring (as seen in [date, label]).

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

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

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

Answer 3

Answer №2

To implement the functionality, you can utilize the code provided:

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>

Answer 4

To implement the functionality, you can utilize the code provided:

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>

Answer 5

Answer №3

Using the document.querySelector method, the content of element with id 'a' is set to the result of mapping the Data array and joining each subarray with a space and adding a line break tag '<br/>'.

Answer 6

Using the document.querySelector method, the content of element with id 'a' is set to the result of mapping the Data array and joining each subarray with a space and adding a line break tag '<br/>'.

Exploring ways to loop through a JSON array and embed it into an HTML element

Answer №1

Problem with the provided code:

Solution:

Answer №2

Answer №3

Similar questions

Error: Element not found. Element with the specified XPath query '//button[normalize-space()='LOAD MORE']' could not be located

Retrieve the total number of arrays from the API, rather than fetching the actual data

Emphasize rows in the MUI-Datatables framework

When using AJAX POST requests, HTML links may become unresponsive

Tips for avoiding an automatic slide up in a CSS menu

The presence of onChange?: (ValueType, ActionMeta) => void with OptionType is not compatible

"Identifying the exact number of keys in a JSON object using

The function signature '(newValue: DateRange<dateFns>) => void' does not match the expected type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void' as per TypeScript rules

Using Regular Expressions in Javascript

Enhance your input text form with a stylish button using Bootstrap

Transmitting JSON data using a Jquery AJAX request in PHP

Implementing a function in ReactJS that is activated by multiple buttons

Parsing a JSON data with JObject and LINQ techniques

What could be causing the oncomplete() method of OmniFaces Ajax utility to fail when triggered by the preRenderView event?

Tips for submitting a jQuery star rating:

How can I stop columned-DIVs from wrapping on the webpage?

Removing double quotes from a specific key value in a JSON object

The functionality of JQuery Fancybox seems to be malfunctioning when attempting to integrate data retrieved from a

What is the best way to eliminate the space between two buttons in a table row or "column"?

Refresh the navigation bar on vuejs post-login