How to convert an observable-array in an array and return that new array?

Question

I am trying to convert an observable array in an array and return the new array with the spread operator in the get function.

I tried to convert the observable array manually before subscribing via map operator but there is no solution in sight (it remains an observable of type void) How do I convert that observable in an array to use the spread operator in get orders()where I return an array type? I need it for a calculation...

//in grid.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Order } from '../order/order.model';


@Injectable({
    providedIn: 'root'
})
export class OrderGridService{

constructor(private http: HttpClient){}

private _orders: Order[];

getAllOrder(): Observable<Order[]> {
  return this.http.get<Order[]>(this._orderURL + "/" + 
   this.userID + "/" + this.currentUservalueToken);
 };

    get orders(): Order[] {
        return [...this._orders];
    }

}

I need to assign to the variable _orders the response of the html request I do in the function getAllOrder() but there it returns an Observable of Order[] instead of an array so I can just return [...this._orders] I hope you understand what I am trying to say.. Thank you for any advice!

You should return the Array wrapped in an Observable from the Service and then unwrap the Observable in the Component either by calling `subscribe` on it, or by using the `async` pipe in the template. — SiddAjmera, Jun 19 '19 at 10:08
So do you want to perform an operation on your array after the "get" is performed and then return that formatted/changed array as an observable. If so i think you can use, pipe and then map operator. Like this this.http.get().pipe(map(array)=>{ do something with an array and return it}) — JustLearning, Jun 19 '19 at 10:13
Then if you want to set your local variable once the get is completed you can chain in a tap operator e.g. this.http.get().pipe(map(()=>{}),tap((array)=>this._orders = array)) — JustLearning, Jun 19 '19 at 10:15
@JustLearning It is the other way. First calling the getAllOrder() function then get is performed. Therefore I need to unwrap the Observable as SiddAjmera mentioned. I will try it — Anna Marie, Jun 19 '19 at 10:15
Related reading [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). You never really return things from async calls, you can perform actions once complete but you have no way to "return" things — Liam, Jun 19 '19 at 10:24
What your trying to do is already covered quite thoroughly in the Angular tutorials, I'd suggest you read though them, specifically [this one on HTTP](https://angular.io/tutorial/toh-pt6) and [this one on observables](https://angular.io/guide/observables) — Liam, Jun 19 '19 at 10:27

score -1 · Answer 1 · answered Jun 19 '19 at 10:20

-1

You can do something like that. But this code is an async. Be careful with that.

//in grid.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Order } from '../order/order.model';


@Injectable({
    providedIn: 'root'
})
export class OrderGridService{

   constructor(private http: HttpClient){
      // on init of this service get data from an api
      this.getAllOrder().subscribe(data => {
         this._orders = data;
      })
   }

   private _orders: Order[];

   getAllOrder(): Observable<Order[]> {
      return this.http.get<Order[]>(this._orderURL + "/" + 
         this.userID + "/" + this.currentUservalueToken);
   };

   get orders(): Order[] {
      return [...this._orders];
   }
}

answered Jun 19 '19 at 10:20

mr_alex

224
1
6

Where is the async code? I see you are using obserables but not promises... – Jamie Rees Jun 19 '19 at 10:41
@JamieRees Can you may write what he/you meant? – Anna Marie Jun 19 '19 at 11:02
@JamieRees, why you say this isn't async? Observable is an async approach, like a Promises. Look at here please: https://rxjs-dev.firebaseapp.com/. _RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code._ – mr_alex Jun 19 '19 at 11:23
I meant this is not easy to set data from async method to property. You should subscribe on this of course. And I wrote only example to set these data to the property inside of this service. – mr_alex Jun 19 '19 at 11:28
@JamieRees here `this.http.get()` is an async code. – mr_alex Jun 19 '19 at 11:34
1

Pretty clearly asynchronous code. My guess @JamieRees was referring to the javascript's [async & await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax. – Frederick Jun 19 '19 at 12:42

How to convert an observable-array in an array and return that new array?

1 Answers1