Una delle problematiche più comuni, nello sviluppo di app con Ionic, è quella di recuperare dei dati da un server remoto invocando dei web services.

La funzione httpClient del modulo HttpClient restituisce, a seconda di come viene invocata, una risposta in formato JSON o in formato testo. In molti casì però potrebbe essere utile convertire il contenuto di questa risposta in un oggetto o in una lista di oggetti.

Qui sotto riporto il codice che ho usato per risolvere questo problema.

In questo esempio viene richiamato un web service che ritorna un Observable nella cui risposta c’è una lista di prodotti in formato JSON.

La funzione fetchProducts invoca il web service e poi restituisce a sua volta un Observable nella cui risposta però c’è una lista di oggetti ti tipo Prodotto.

I campi del JSON ritornato dal web service coincidono con gli attributi dell’oggetto Prodotto (stesso nome e tipo) con l’eccezione del campo search_string, aggiunto nel costruttore della classe, che è usato dal filtro di ricerca della pagina che elenca i prodotti, da cui è tratto questo codice.

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';
 
...
 
 // The Product class
 export class Product implements IProduct {
      
  id: number;
  name: string;
  description: string;
  model: string;
  price: number;
  category_id: number:
  category_id: number:
  ...
  search_string: string;
 
  constructor(values: Object = {}) {
   Object.assign(this, values);
   this.search_string = this.name + ' ' + this.description;
   console.log('---->Product-this.search_string:', this.search_string);
  }
 }
 
 /*
  *   Fetch all the products and returns an Observable
  *   with a list of Product objects
  */
 fetchProducts(): Observable<Product[]> {
  console.log('*** fetchProducts ***');
  ...
  return  this.httpClient
   .get<Product[]>(commandUrl, {headers: this.getWsHeader(), 
        responseType: responseType})
   .pipe(map(results  => {
    return  results.map((result) =>  new  Product(result));
 }));
 
}

Fonti e riferimenti:

• Post sul blog di Josh Morony: An Introduction to HTTP Requests & Fetching Data in Ionic
• Post su Djamware: Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example
• Discussione su Ionic forum: How to return an Observable with an array of objects calling a web service?
• Ionic framework: sito ufficiale.