In questo articolo vedremo il processo del parsing dei dati in JSON da un endpoint API di un sistema web-based. Vedremo come effettuare una semplice chiamata http in Angular e come sottoscrivere la richiesta per fare il parsing di essa e organizzare le informazioni ottenute.

Per prima cosa dobbiamo aver presente i concetti programmazione denominata “Reactive pattern” di Observable, Observer e di Subscriber.

Gli Observable sono oggetti contenuti nella libreria RXjs ( REACTIVE X) che ci consentono di gestire i dati prelevati da un database o, come in questo caso da un endpoint, in maniera asincrona.

Per iniziare a fare il parsing dei dati ottenuti dall’endpoint, bisogna iscriversi all’oggetto di tipo Observable (l’oggetto è l’Observer) e questa azione si identifica con il Subscriber.

Vediamo qui di seguito un esempio per applicare questi concetti in Angular.

Nel file del nostro Service in Angular (es. service.service.ts) inseriamo il seguente codice che restituirà un oggetto Observable di un tipo generico:

export class ServiceService {

  constructor(private http: HttpClient, private spinner: NgxSpinnerService) {}

  request = (url:string, parameters:any, method:string): Observable => {
    return this.http.request(method, url, {
        headers: {
            'Content-Type': 'application/json'
        },
        params: parameters
    }).pipe(
        /*
        map((data) => {
            data.sort((a, b) => {
                const textA = a.nome.toUpperCase();
                const textB = b.nome.toUpperCase();
                return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
            });
            return data;
        }),
        */
        catchError(error => {
            return error;
        })
    );
  };
}

Nel codice del componente invece inseriamo questo codice di esempio che aziona uno spinner di caricamento (nell’esempio è un componente installato chiamato NgxSpinner), effettua la richiesta a un endpoint e riceve come risposta un JSON:

export class ComponentComponent implements OnInit {
  obs: Observable;

  constructor(private service: ServiceService, private spinner: NgxSpinnerService) { }

  ngOnInit() {
    // this.observableOfJson observable
    this.spinner.show();
    this.obs = this.service.request('https://jsonplaceholder.typicode.com/todos',{par : 1},'GET');
    this.obs.subscribe((data:any) => {
      if(!data.error){
        this.spinner.hide();
      }else{
        alert(data.error);
      }
    });
  }
}

A questo punto avremo la variabile obs del componente con il JSON ottenuto che andrà passato alla view.

Nella view faremo un ciclo che visualizzerà una lista HTML con tutti i todos ottenuti dall’endpoint. La particolarità degli Observables nella view è il codice *ngIf=”obs | async as _obs” che dice ad Angular che la variabile obs è asincrona e quindi deve essere gestita dopo il caricamento della view principale.

Una volta che la richiesta e i dati nell’observer vengono sottoscritti, viene passata la variabile con i dati JSON al ciclo della view con questo codice *ngFor=”let row of _obs”.

<ngx-spinner size="default" color="#fff" type="ball-clip-rotate" [fullScreen]="true"></ngx-spinner>
<h1>Elenco</h1>
<a href="/test">TEST</a>
<div *ngIf="obs | async as _obs">
  <ul *ngFor="let row of _obs">
    <li>{{row.title}}</li>
  </ul>
</div>