javascript - Angular abonnere skyv objekt til matrise

Jeg lager en Angular-applikasjon, og der jeg har et tomt array som,

  users: any = [];

Deretter gjør jeg et servicekall i ngOnInit for å lagre dataene i users-arrayen slik,

  ngOnInit() {

    //Getting the data from json
    this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {
      console.log("response", response.data);
      response.data.forEach(element => {
        //Pusing the data to users array
        this.users.push(element);
      });
    })

    //Trying to get the complete array after push of the element from the service response data
    console.log("users array", this.users);
    //But it shows empty array
  }

Men jeg klarer ikke å få dataene i console.log("users array", this.users); fordi servicekallet medfører en forsinkelse..

Hvordan skyve dataene inn i this.users, og når vi kaller utenfor tjenesten, bør det ha de utfylte dataene og ikke være tomt som nå..

Lagde også en funksjonell stackblitz angående det https://stackblitz.com/edit/angular-q3yphw

Vennligst se på konsollen som har nåværende resultat..

Gjeldende resultat i console.log("users array", this.users); er tom array [].

Så jeg forventer følgende resultat i console.log("users array", this.users); utenfor tjenesten og inne i ngOnInit,

[
{"id":1,"value":"User One"},
{"id":2,"value":"User Two"},
{"id":3,"value":"User Three"}
]

Siden jeg er ny i Angular, vennligst hjelp meg med å oppnå det forventede resultatet..

Svar #1

Had forket deg Stackblitz-demo

Hvis du vil manipulere dataene dine etter HTTP Client-responsen, kan du faktisk gjøre det ved å leke med RxJS-operatørene. Etter de metodene inne i pipen, når du abonnerer på den endelige verdien, vil den direkte bli rendret til malen din.

this.httpClient
  .get('https://api.myjson.com/bins/n5p2m')
  .pipe(
    map(response => response.data),
    tap(users => console.log("users array", users))    // users array [Object, Object, Object]
  )
  .subscribe(users => this.users = users);

Hvis du ikke vil bruke RxJS-operatørene, kan du fortsatt manipulere det etter at du har abonnert på den endelige verdien og utføre din manuelle datamanipulasjon

Det er ikke nødvendig å utføre .forEach() for å lagre arrayen av objekter fra response.data, siden Angular allerede har gjort det for deg. Så hver gang du tildeler det som

this.users=response.data det vil lagre ditt array av objekter [Object, Object, Object]

this.httpClient
  .get('https://api.myjson.com/bins/n5p2m')
  .subscribe(response => this.users = response.data);  // This will directly store your response data in an array of objects.

Svar #2

Du kan lagre data i en matrise uten løkke også.

ngOnInit() {

  //Getting the data from json
  this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {      
    this.users.push(...response.data)
    console.log("users array", this.users);  
  })            
}

Relaterte artikler