Node.js: Using a for loop to iterate through a JSON array and extract all unique identifiers

Question

Node.js: Using a for loop to iterate through a JSON array and extract all unique identifiers

I am encountering an issue with extracting the different ids from my json object. The only id I seem to be able to retrieve is that of the last item.

Below is the function in question:

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 that I am receiving:

{
  "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}

Thank you in advance for your help

javascript json

Answer 1

Answer №1

The mistake in your code lies with this particular line:

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

To rectify it, you need to include a "+" before the "=" sign to concatenate additional strings/ids to the innerHTML.

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

I devised an alternative approach wherein I utilized Array.prototype.map() to generate an array consisting of all the ids and then employed Array.prototype.join() to amalgamate them into a single string.

var xmlhttp = new XMLHttpRequest();
var url = "data:application/json;base64,ewogICJJdGVtcyI6W3sKICAgICJtYXJjYSI6Ikd1enppIiwKICAgICJ0aXRvbG8iOiJNb3RvIEd1enppIFYxMDAgTWFuZGVsbG8sIGxhIHJlZ2luYSBkaSBFSUNNQSAyMDIxIiwKICAgICJpZCI6IjEyMzQ1NiIsCiAgICAiaW1tYWdpbmUiOiJtb3RvX2d1enppX3YxMDBfbWFuZGVsbG8uanBnIiwKICAgICJkYXRhIjoiMjcvMTEvMjAyMSIKICAgIH0sCiAgICB7CiAgICAibWFyY2EiOiJCaW1vdGEiLCJ0aXRvbG8iOiJCaW1vdGE6IGFycml2ZXLgIHVuJ2FkdmVudHVyZSBzdSBiYXNlIFRlc2kiLAogICAgImlkIjoiMTM1NjIzIiwKICAgICJpbW1hZ2luZSI6ImJpbW90YS1fYXJyaXZlcmFfdW5hdmVkbnR1cmVfc3VfYmFhdHQicCIKICAgICJkYXRhIjoiMzk2LzExLzMwMjEtMTQ6NDUifSwKICAgIHsi...
xmlhttp.send();

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

Answer 2

The mistake in your code lies with this particular line:

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

To rectify it, you need to include a "+" before the "=" sign to concatenate additional strings/ids to the innerHTML.

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

I devised an alternative approach wherein I utilized Array.prototype.map() to generate an array consisting of all the ids and then employed Array.prototype.join() to amalgamate them into a single string.

var xmlhttp = new XMLHttpRequest();
var url = "data:application/json;base64,ewogICJJdGVtcyI6W3sKICAgICJtYXJjYSI6Ikd1enppIiwKICAgICJ0aXRvbG8iOiJNb3RvIEd1enppIFYxMDAgTWFuZGVsbG8sIGxhIHJlZ2luYSBkaSBFSUNNQSAyMDIxIiwKICAgICJpZCI6IjEyMzQ1NiIsCiAgICAiaW1tYWdpbmUiOiJtb3RvX2d1enppX3YxMDBfbWFuZGVsbG8uanBnIiwKICAgICJkYXRhIjoiMjcvMTEvMjAyMSIKICAgIH0sCiAgICB7CiAgICAibWFyY2EiOiJCaW1vdGEiLCJ0aXRvbG8iOiJCaW1vdGE6IGFycml2ZXLgIHVuJ2FkdmVudHVyZSBzdSBiYXNlIFRlc2kiLAogICAgImlkIjoiMTM1NjIzIiwKICAgICJpbW1hZ2luZSI6ImJpbW90YS1fYXJyaXZlcmFfdW5hdmVkbnR1cmVfc3VfYmFhdHQicCIKICAgICJkYXRhIjoiMzk2LzExLzMwMjEtMTQ6NDUifSwKICAgIHsi...
xmlhttp.send();

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

Node.js: Using a for loop to iterate through a JSON array and extract all unique identifiers

Answer №1

Similar questions

Obtain a string value from a JavaScript object

Limiting the display of JSON data on a webpage using jQuery

Discovering a specific string amidst two other strings across multiple lines in php

Exploring the method of retrieving nested JSON objects in Angular

When using $.getJSON, the callback function fails to execute

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to manipulate text in JQuery without altering the inner element?

JavaScript event handler for dynamic button click

Utilize key value pairs to retrieve data from a multi-level array

trouble with maintaining nodejs mariadb connection

Guide to uploading a file into a MongoDB database with the help of Mongoose

What is the best way to extract parameters from a JSON object?

I am looking to utilize jQuery to dynamically update a selected checkbox through AJAX

Which is better for creating hover effects: CSS3 or JavaScript?

The loading bar animation doesn't begin at a blank slate

AngularJS - Establishing communication between controller and view

Using asp.net along with Ajax for dynamic web development

Can the state and city be filled in automatically when the zip code is entered?

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

Executing a function without a callback within an Async library