Angular HttpClient.

Om externe JSON-date op te halen, gebruik je de ingebouwde HTTP-service (HttpClient) van Angular. Wat je terugkrijgt is ALTIJD een observable. In tegenstelling tot voorgaande voorbeelden, bestaat de stream nu maar uit één element.

Je kan de inkomende data nog steeds op twee manieren verwerken. Ofwel gebruik je de async-pipe in de template, ofwel subscribe je in de component.

In onderstaande voorbeelden lezen we de adresgegevens van 10 gebruikers in en plaatsen deze op een Bootstrap-card. De gegevens zijn afkomstig van een fake REST API JSON placeholder.

Voor je de HttpClient kan gebruiken, moet je de HttpClientModule eerst in app.module.ts importeren.

De HttpClient is een ingebouwde service van Angular. Ook deze service injecteer je, net zoals je eigen services, rechtstreeks in de constructor van de component.

Ruwe data verwerken

Bestudeer volgende code: https://stackblitz.com/edit/tmk-observable-get-1.

In het eerste voorbeeld verwerken we de ruwe data via de async-pipe in de template.

Component

  • Lijn 15:
    Injecteer de ingebouwde HttpClient-service in de constructor.
  • Lijn 19:
    Maak een HTTP-call naar JSONplaceholder en plaats de inkomende data in de observable users$.

Merk op dat we bij de get-instructie ook het datatype <any[]> meegeven. Voorlopig is die niet zo belangrijk, maar in de volgende voorbeelden zal de compiler fouten generen als je het type niet op voorhand meegeeft.

Template

  • Lijn 3:
    De preloader is enkel zichtbaar indien users$ nog geen data bevat.
  • Voor de overige velden niets speciaals te melden. Alle nuttige data (naam, email, adres, ...) wordt via property binding in een card verwerkt.
Component Template app.module.ts 

        

        

          

        

        

          

        

      

    

    
Stel dat je niet alle contacten nodig hebt, of dat je maar een beperkt deel van de velden wilt gebruiken, dan kan
      je de inkomende data best bewerken voor je ze op de pagina toont.

      Dit kan zowel voor als tijdens de subscription.

  


  
De data VOOR subscription manipuleren.

  

    

      

        
Bestudeer volgende code: https://stackblitz.com/edit/tmk-observable-get-2.
        

        
In dit voorbeeld wordt de data nog steeds via de async-pipe in de template verwerkt, maar de
          inkomende gegevens worden wel op voorhand wat gemanipuleerd.

          In plaats van alle adreskaartjes te tonen, gaan we enkel de eerste drie kaarten tonen. De velden die we
          uiteindelijk toch niet gebruiken, worden verwijderd en het adres, dat origineel uit meerdere elementen
          bestaat, wordt gebundeld tot één string met HTML-code.

        
Component

        
    
          
  • Lijn 22:
    
            In voorgaand voorbeeld verdwijnt de preloader vrijwel onmiddellijk. Door (tijdelijk) een tijdsvertraging van
            3sec in te bouwen, kan je de werking preloader beter bestuderen.
          
    • 
        

        
Nogmaals: de stream bestaat maar uit één element. Dit element bevat een array van tien objecten. Omdat
          we niet alle waardes binnen een object gebruiken, kan je het object al manipuleren voor de subscription.
          Hiervoor gebruik je de operator map().
          Dit is waarschijnlijk de operator die je in je eigen toepassing ook het vaakst gaat gebruiken.

        
    
          
  • Lijn 25:
    
            Gebruik enkel de eerste drie elementen uit de volledige array.
          
    • 
          
  • Lijn 26:
    
            Doorloop elk element in de array.
          
    • 
          
  • Lijn 27:
    
            Zet user.name in hoofdletters.
          
    • 
          
  • Lijn 28:
    
            user.company is origineel zelf een object dat meerdere velden bevat (name, bs en catchPhrase).
            Uiteindelijk zijn we enkel in de firmanaam geïnteresseerd. We overschrijven dus het object
            user.company
            door de string user.company.name.
          
    • 
          
  • Lijn 29:
    
            Ook user.address is origineel een object met meerdere velden. We overschrijven het object user.address
            door de string die bestaat uit een combinatie van andere velden.
          
    • 
        

        
Template

        
De template wordt iets eenvoudiger. Het adres wordt nu via [innerHTML] in de kaart getoond.

      

      

        

          Component
          Template
        

        

          

        

        

          

        

      

    

  


  
De data TIJDENS subscription manipuleren.

  

    

      

        
Bestudeer volgende code: https://stackblitz.com/edit/tmk-observable-get-3.
        

        
Dit voorbeeld geeft exact hetzelfde resultaat als voorgaand voorbeeld, maar nu wordt de binnenkomende data
          gemanipuleerd tijdens de subscription. Als je in de template de async-pipe gebruikt, dan zal deze de
          originele, ruwe data verwerken. Dat is natuurlijk niet de bedoeling.

          Omdat de data iets later gemanipuleerd wordt, zijn we verplicht om in de template met een "gewone"
          variabele te werken.

        
Component

        
    
          
  • Lijn 12:
    
            De variabele users is nu geen observable, maar wel een gewone variabele van het type array.
          
    • 
          
  • Lijnen 20 t.e.m. 27:
    
            Deze code is identiek aan de code binnen map() uit voorgaand voorbeeld.
          
    • 
          
  • Lijn 28:
    
            De gemanipuleerde data wordt in de lokale variabele users geplaatst.
          
    • 
        

        
Template

        
Omdat we met een gewone variabele werken, vind je in de template nergens nog een async-pipe terug.
          Op async na, is de template-code bijna identiek aan de template-code uit voorgaand voorbeeld.

          Het tonen/verbergen van de preloader is iets eenvoudiger. Bij het openen van de pagina bevat de variabele users
          nog geen data. De preloader verschijnt enkel indien de variabele users leeg is: *ngIf="!users".
        

      

      

        

          Component
          Template