Как вывести элементы массива JSON?

Question

[Junior Development]

Дан массив

[
  {
    "id": 1,
    "name": "Allen, Miss. Elisabeth Walton",
    "age": 29,
  },
  {
    "id": 2,
    "name": "Allison, Master. Hudson Trevor",
    "age": 50,
  }
]

Код JS

let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        let myArr = JSON.parse(this.responseText);

        myArr.forEach((elem, index, arr) => {
            console.log(elem.name);
        document.querySelector('.wrapper').innerHTML = elem.name;
        });

    }
};
xmlhttp.open("GET", "http://***/data.json", true);
xmlhttp.send();

Необходимо вывести к примеру все элементы name в столбик.
Я не могу понять почему выводит только один пункт.

Comments

[Rerurk]

У вас по итогу приходит массив с объектами, создайте интерфейс объекта, и дергает откуда все что хотите, засовывайте это в span, (к примеру) и делайте его аппенд в какой нибудь html объект

[Rerurk]

Желательно на сервере после указания возраста убрать запятую

Answer 1

[Арсений Матыцин]

1. (elem, index, arr) второй и третий параметр необязательны.
2. .innerHTML — перезаписывает в тот же элемент все, что ты выводишь. Используй appendChild хотя бы.

Answer 2

[xenonhammer]

он выводит, просто каждый раз перезаписывает

Answer 3

[Rerurk]

fetch('"http://***/data.json"', {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
}).then(r=>r.json()).then(r=>{

r.forEach(function (item) {
let span=document.createElement('span');
span.innerText=item.name;
document.body.appendChild(span);
document.body.appendChild(document.createElement('br'));

})
});