Come usare un API in AJAX in Javascript

Che cosa andremo a realizzare in questo progetto ?

In questo progetto realizzeremo una pagina web che mostrerà i dati di alcuni utenti presi tramite l'api Random User API

Sarà presente un pulsante, che, una volta cliccato, permetterà di ricaricare la pagina mostrando un nuovo utente insieme a tutti i suoi dati.

Funzione per selezionare i nodi dal DOM

Come prima cosa ci occupiamo della scrittura di una funzione molto utile, in quanto ci permetterà di selezionare dal DOM gli elementi in maniera più semplice.

const getElement = (selection) => {
  const element = document.querySelector(selection);
  if (element) return element;
  throw new Error('no element selected');
};

Cosi facendo ci basterà importare questa funzione ogni volta che ci servirà ed utilizzarla in questo modo:

import getElement from "./getElement.js";

const img = getElement(".user-img");

Fetchare i dati

Per fetchare i dati andremo a scrivere una funzione apposita. Andremo ad utilizzare fetch() ed async/await per ottenere i dati dalla chiamata all'url.

A questo punto, una volta ottenuti, andremo a destrutturare la risposta per estrapolare ed ottenere solo le informazioni che servono alla riuscita del progetto. Una volta ottenute verranno returnate.

Display delle informazioni

Adesso che abbiamo tutte le informazioni, dobbiamo solo mostrarle sullo schermo.

Per farlo andiamo a selezionare dal DOM i nodi che ci servono tramite la funzione getElement, e successivamente andremo ad iniettare le informazioni nei corrispondenti nodi tramite textContent

A questo punto, nel file index.js, andiamo ad invocare le funzioni appena scritte. Creiamo una funzione apposita:

const showUser = async () => {
  // get user from api
  const person = await getUser();

  // display user
  displayUser(person);
};

A questo punto selezioniamo dal DOM il nodo del pulsante che ci permette di aggiornare l'utente. Andremo ad utilizzare un addEventListener sia sul pulsante che sull' oggetto globale window, in modo che l'utente venga cambiato anche al refresh della pagina.

import getElement from "./src/getElement.js";
const btn = getElement(".button-xs");

btn.addEventListener("click", showUser);
window.addEventListener("DOMContentLoaded", showUser);