Как перебрать список JSON и вставить в элемент HTML?

Question

Данные, возвращаемые из запроса ajax, выглядят так:

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

Запрос ajax работает отлично, и мне удалось сохранить его в переменной с именем Data в функции.

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

Я успешно прошел через Data, чтобы получить каждый подсписок.как i.Как бы я представил это в моем HTML?Я пытался использовать document.querySelectorAll('.Appointments').innerHTML = Data[i];, но не работает.

Ожидаемый результат будет на веб-странице, где каждая строка имеет свой собственный разделитель.

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

Я новичок вJSON, поэтому подробное объяснение будет высоко оценено, спасибо.

Answer 1

Вы можете использовать код ниже.

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 2

Проблема с вашим кодом:

document.querySelectorAll('.Appointments').innerHTML

Приведенный выше код не имеет особого смысла.querySelectorAll возвращает коллекцию элементов HTML с именем класса «Встречи».

Коллекция не имеет метода innerHTML, он есть только у элементов HTML.Какова была цель этого?

Было бы лучше получить элемент по идентификатору.

---

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

Приведенный выше код является более старым способомцикл через массив.В настоящее время существует множество методов для массивов, которые гораздо лучше использовать.Я рекомендую вам проверить список .

Я бы порекомендовал использовать Array # map и Array # join

Array # map:

Очень полезно для преобразования массива данных в массив строки HTML.

Метод map () создает новый массив срезультаты вызова предоставленной функции для каждого элемента в вызывающем массиве.

Array # join:

Очень полезно для преобразования массива строки HTML водна целая строка.

Метод join () создает и возвращает новую строку путем объединения всех элементов в массиве (или объекте, подобном массиву), разделенных запятыми или указанной строкой-разделителем.,Если в массиве есть только один элемент, то этот элемент будет возвращен без использования разделителя.

Решение:

Используйте Array # map и Array # join.Это то, чем я часто пользуюсь и считаю наиболее читабельным.

В этом решении также используется деструктурирование (часть, в которой используется [date, label]).

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 3

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