javascript: how to get all ids of a json array with for loop

I’m having a problem getting the different ids from my json object. I get are the id of the last item.

This is the function:

var xmlhttp = new XMLHttpRequest();
var url = "https://wjko5u2865.execute-api.us-east-2.amazonaws.com/articles"; 
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
   var allart = JSON.parse(this.responseText);
    for(let i = 0; i < allart.Items.length; i++)
    {
      document.getElementById("id").innerHTML = allart.Items[i].id;
    }
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

This is the json array I get:

{
  "Items":[{
    "marca":"Guzzi",
    "titolo":"Moto Guzzi V100 Mandello, la regina di EICMA 2021",
    "id":"123456",
    "immagine":"moto_guzzi_v100_mandello.jpg",
    "data":"27/11/2021"
    },
    {
    "marca":"Bimota","titolo":"Bimota: arriverà un'adventure su base Tesi",
    "id":"135623",
    "immagine":"bimota-_arrivera_unadventure_su_base_tesi.jpg",
    "data":"04/12/2021"
    },
    {
    "marca":"Ducati",
    "titolo":"Ducati, la DesertX sarà svelata a Dubai il 9 dicembre",
    "id":"123789",
    "immagine":"b_desertx-dwp2022-2-uc336332-high.jpg",
    "data":"04/12/2021"
    },
    {"marca":"Benelli",
    "titolo":"EICMA 2021, Benelli "sforna" le moto più attese",
    "id":"146975",
    "immagine":"benelli_2.jpg",
    "data":"27/11/2021"
    }
    ],
    "Count":4,"ScannedCount":4}
  

Thanks to all in advance

Answer

The concrete error in your code was this line:

document.getElementById("id").innerHTML = allart.Items[i].id;

It needs a “+” before the “=” to add more strings/ids to the innerHTML.

document.getElementById("id").innerHTML += "<br/>"+allart.Items[i].id;

I made an alternative solution where I use Array.prototype.map() to create an array of all the ids and then Array.prototype.join() to create a string with all the ids.

var xmlhttp = new XMLHttpRequest();
var url = "data:application/json;base64,ewogICJJdGVtcyI6W3sKICAgICJtYXJjYSI6Ikd1enppIiwKICAgICJ0aXRvbG8iOiJNb3RvIEd1enppIFYxMDAgTWFuZGVsbG8sIGxhIHJlZ2luYSBkaSBFSUNNQSAyMDIxIiwKICAgICJpZCI6IjEyMzQ1NiIsCiAgICAiaW1tYWdpbmUiOiJtb3RvX2d1enppX3YxMDBfbWFuZGVsbG8uanBnIiwKICAgICJkYXRhIjoiMjcvMTEvMjAyMSIKICAgIH0sCiAgICB7CiAgICAibWFyY2EiOiJCaW1vdGEiLCJ0aXRvbG8iOiJCaW1vdGE6IGFycml2ZXLgIHVuJ2FkdmVudHVyZSBzdSBiYXNlIFRlc2kiLAogICAgImlkIjoiMTM1NjIzIiwKICAgICJpbW1hZ2luZSI6ImJpbW90YS1fYXJyaXZlcmFfdW5hZHZlbnR1cmVfc3VfYmFzZV90ZXNpLmpwZyIsCiAgICAiZGF0YSI6IjA0LzEyLzIwMjEiCiAgICB9LAogICAgewogICAgIm1hcmNhIjoiRHVjYXRpIiwKICAgICJ0aXRvbG8iOiJEdWNhdGksIGxhIERlc2VydFggc2Fy4CBzdmVsYXRhIGEgRHViYWkgaWwgOSBkaWNlbWJyZSIsCiAgICAiaWQiOiIxMjM3ODkiLAogICAgImltbWFnaW5lIjoiYl9kZXNlcnR4LWR3cDIwMjItMi11YzMzNjMzMi1oaWdoLmpwZyIsCiAgICAiZGF0YSI6IjA0LzEyLzIwMjEiCiAgICB9LAogICAgeyJtYXJjYSI6IkJlbmVsbGkiLAogICAgInRpdG9sbyI6IkVJQ01BIDIwMjEsIEJlbmVsbGkgXCJzZm9ybmFcIiBsZSBtb3RvIHBp+SBhdHRlc2UiLAogICAgImlkIjoiMTQ2OTc1IiwKICAgICJpbW1hZ2luZSI6ImJlbmVsbGlfMi5qcGciLAogICAgImRhdGEiOiIyNy8xMS8yMDIxIgogICAgfQogICAgXSwKICAgICJDb3VudCI6NCwiU2Nhbm5lZENvdW50Ijo0fQo=";
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    let allart = JSON.parse(this.responseText);
    let ids = allart.Items.map(item => item.id).join('<br/>');
    document.getElementById("id").innerHTML = ids;
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

<div id="id"></div>