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

Question

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

document.getElementById("id").innerHTML = ... simply finds the DOM element with ID "id" and writes the content to that same element over and over. That's probably not what you want to do but it's not clear what your HTML contains or what exactly you want to happen. — user2740650
– user2740650, Commented Jan 3, 2022 at 18:35
You're rewriting the 'id="id"' element each time. Try adding to it instead, like document.getElementById("id").innerHTML += "<br/>" + allart.Items[i].id; — Kinglish
– Kinglish, Commented Jan 3, 2022 at 18:35

chrwahl · Accepted Answer · 2022-01-03 19:06:04Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related