Angular 2 and RxJS: How to change HTTP call that returns Observable

Jerry Huckins

How do I change this function to work with the JSON change described below?

The current function returns an Observable<User[]>, but with the new JSON, the new admin object has been added. The new function should successfully observe both the existing users array and the new admins array.

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users)
    .map((r: Response) => r.json().assets.users as User[]);
}

JSON returned from /api/users

{
"assets": {
    "users": [
        // user objects
    ]
}

...now returns two arrays, users and admins.

{
"assets": {
    "users": [
        // array of user objects
    ],
    "admins": [
        // array of admin objects
    ]

}

Please assume that my code does have User and Admin classes already created that correctly reflect the properties of the related JSON objects returned.

Max Koretskyi

Well, you have a few options how to return the data:

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users')
    .map((r: Response) => { 
         const assets = r.json().assets;
         return {
             users: assets.users as User[],
             admins: assets.admins as Admin[]
         }
     });
}

Or like this:

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users')
    .map((r: Response) => { 
         return [
             assets.users as User[],
             assets.admins as Admin[]
         ]
     });
}

Or like this:

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users')
    .map((r: Response) => { 
         return [
             ...assets.users as User[],
             ...assets.admins as Admin[]
         ]
     });
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

rxjs observable angular 2 on localstorage change

How to call an http method without the observable in Angular 2

How to refresh the view when angular $http promise call wrapped in rxjs Observable

How shall I use fakesAync in Angular unit test when you make an HTTP call that returns an observable?

rxJS observable to repeat call every time condition is met in Angular 2

RxJS 5 Observable and Angular2 http: Call ajax once, save the result, and subsequent ajax calls use cached result

Angular2 RxJs: simple take() from http returned observable

Rxjs Observable Interval and Angular2 HTTP: wait for response

Angular 2 How do I call a service method when an observable changes/when a services returns new results?

Angular2 http call and typified Observable problems

How to unsubscribe or dispose an interval observable on condition in Angular2 or RxJS?

How to sort a list that is held as an Observable (RxJS, Angular 2)

How to check if a RxJS Observable contains a string in Angular2?

Angular, rxjs: HTTP Observable depending authenticated user

Angular/RxJS wait for HTTP response in inner Observable

how to change the data of the first observable using data from another observable including the condition in angular/rxjs

How to create an RxJS Observable such that it returns a value when call back function completes

Angular2 Http with RXJS Observable TypeError: this.http.get(...).map(...).catch is not a function

RxJS Observables - How to condition observable returns

How to make an http call every 2 minutes with RXJS?

How to call both next and error on RxJS Observable

How to let Angular 6 Http Get method returns an array of observable instead of an observable of array?

Angular2 / RxJS - updating variable after getting data from Http observable

Angular/RxJS How do I use observable pipe to generate ajax call hierarchy but return a single response?

Angular 2 and RxJS 5 Observable.share()

angular 2 rxjs subscribe to observable code not executing

RXJS Angular 2 observable losing track if 'this'

RxJS / Angular 2 - Split Observable Array

angular2 rxjs observable forkjoin

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive