How to push data in array from HttpClient url with get?

Question

I'm still a newbie in programming and I apologize if the question may be stupid.

But i want to know how i can save data from a "get(url)" in an array. Once this data is in an array, I want to do the length of the array but when i do a "console.log to check the values and the length with "array.length" it always show "0".

In fact,after retrieving the length of the array, I would make a method to retrieve a random value to display a random faceSnap.

My problem is in the function : showOneFaceSnap()

import { Observable, Subject, Subscription } from 'rxjs';
import { FaceSnap } from './../models/face-snap.model';
import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root' //on renregistre ce service à la racine de l'application
})

export class FaceSnapService {


  // newFaceSnap$ = new Observable<FaceSnap[]>();

  constructor(private http:HttpClient){

  }

getAllFaceSnaps(): Observable<FaceSnap[]>{
  // return this.faceSnaps;
  return this.http.get<FaceSnap[]>('http://localhost:3000/facesnaps');
}

getFaceSnapById(faceSnapId: number): Observable<FaceSnap>{
  // const faceSnap = this.faceSnaps.find(faceSnap => faceSnap.id===faceSnapId)
  return this.http.get<FaceSnap>(`http://localhost:3000/facesnaps/${faceSnapId}`);
}


showOneFaceSnap(){
  const faceTab = [];

  this.http.get<FaceSnap[]>('http://localhost:3000/facesnaps').subscribe(facesnaps=> 
  facesnaps.forEach(data=> faceTab.push(data)) );


  console.log("array ",faceTab, "array length ", faceTab.length );

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Welcome! It depends on the response but if you can show us a code snipped we can maybe help — RSD
– RSD, Commented Jun 21, 2022 at 19:30
Sorry… angular 1.7.5…? Your code must give loads of errors? You might benefit from following some getting started guides first on Angular.io — MikeOne
– MikeOne, Commented Jun 21, 2022 at 20:03
The get request is async and will need some time to be resolved. And your console log will be executed right after the request has been fired. And thats the reason why the console.log always shows length = 0. You can see that if you write a console.log into the subscribtion infront of your forEach loop. This will probable show your array. To solve the problem you can make an async/await function or work with Rxjs and the observable — RSD
– RSD, Commented Jun 21, 2022 at 20:15

krzyhan · Accepted Answer · 2022-06-21 20:38:27Z

2

As RSD mentioned, data is available inside the subscription

let faceTab = [];

this.http.get<FaceSnap[]>('http://localhost:3000/facesnaps').subscribe(data=> 
 {
   faceTab = data;
   console.log(faceTab);
 });

answered Jun 21, 2022 at 20:38

krzyhan

1312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to push data in array from HttpClient url with get?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related