rxjs observable.of(object) returns {"_isScalar": "", "value": {}, "scheduler": "" } instead of value

divramod

I am fairly new to rxjs.

I tried to create a function that runs a angular 2 http request like that:

syncFromApi$() {

  // create Headers
  ...

  let ob$ = this.http.post(
    CONFIG_APP.apiEndpoint + '/sync/app',
    '',
    { headers: headers }
  )
  .map((response:Response) => {
    return Observable.of({type: "success", payload: response.json()});
  })
  .catch(function (err:Response) {
    return Observable.of({type: "error", payload: err.json()});
  });

  return ob$;
}

In short, when having success, I am returning an Object which indicates, if the request was successful. After that I want to switch map depending on the returned object:

let o$ = syncFromApi$()
  .switchMap((value) => {
    console.log("value", JSON.stringify(value, null, 0));
    if (data.type === 'success') {
      return Observable.of(1);
    } else if (data.type === 'error') {
      return Observable.of(2);
    }
  });

And here comes the problem I face. The console.log(...) outputs a object like this:

value, {"_isScalar": true, "value": THIS_IS_WHAT_I_NEED_AS_VALUE, "scheduler": null}

But I need only the object I returned with the syncFromApi$ function.

Can anyone explain to me, if I am using observable.of() in the wrong manner?

I tried observable.of(1) and it returns 1 as value. If I use a object (observable.of({ type: "myType", message: "myMessage" })), it returns an object wrapping the object I need with the keys "_isScalar", "value" and "scheduler".

Thanks in advance.

Thierry Templier

Your problem is in your map operator:

let ob$ = this.http.post(
  CONFIG_APP.apiEndpoint + '/sync/app',
  '',
  { headers: headers }
)
.map((response:Response) => {
  return {type: "success", payload: response.json()}; // <----
})

You need to return an object not an observable. The map operator uses the object like it is and doesn't project the returned observable into the observable chain.

If you want to return Observable.of for some reasons, you need to use the flatMap operator instead:

let ob$ = this.http.post(
  CONFIG_APP.apiEndpoint + '/sync/app',
  '',
  { headers: headers }
)
.flatMap((response:Response) => {
  return Observable.of({type: "success", payload: response.json()});
})

That's fine for the catch operator since it expects an observable to be returned into its associated callback.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to get current value of RxJS Subject or Observable?

RxJs get value from observable

Curl returns true instead of value

JsonResults returns Enum value instead of String representation

RxJs Observable - Handle 404 by emitting default value

How to assign an initial value to Subject RxJS observable?

Prolog programm returns yes instead of value

RxJS .toPromise returns only one value

RXJS: Return the manipulated value of outer observable

RxJS - Observable is not emitting value with .next() on first call

Rxjs assign value in observable to global variable

Angular 8 Observable Returns "_isScalar:false..."

Indirect expansion returns variable name instead of value

Mocking returns Mock Object instead of return value

Rxjs: Execute code and emit value on completion of Observable

RxJS Error Observable when another emits value

Template "data" binding provides value instead of an observable

JSpinner returns default value instead of typed one

.value returns undefined instead of proper html value

Echo returns array instead of value

Object function returns function instead of value

Rxjs - Not grabbing the value of dom element in observable

MySQL returns the name of the column instead of the value

Scala reduce and fold returns 0 instead of a value

Sql: Query returns column name instead of Value

Rxjs: shorthand of create observable from value or observable

RXJS in Angular 6 returns only { "_isScalar": false }

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

RXJS, add new key:value to nested observable

TOP Ranking

  1. 1

    What exactly is memory mapped io and port based io

  2. 2

    How i extract text from a model dialog in selenium?

  3. 3

    pump.io port in URL

  4. 4

    Selenium browsing with headless isn't working?

  5. 5

    change TabView indicator SwiftUI

  6. 6

    python requests How to send data to a website

  7. 7

    Kubernetes pods not starting, running behind a proxy

  8. 8

    Scaffold-DbContext returns System.ArgumentNullException: Parameter name: proposedIdentifier in EFCore 2.0 when trying to pluralize

  9. 9

    Java POI: How to find an Excel cell with a string value and get its position (row) to use that position to find another cell

  10. 10

    Creating interaction sessions based on timestamps in pandas

  11. 11

    Maven annotation processing processor not found

  12. 12

    Missing field when deserializing using Jackson (Polymorphic)

  13. 13

    Spring Data JPA repository methods don't recognize property names with underscores

  14. 14

    Get all Woocommerce products from current product category term Id in a WP_Query

  15. 15

    How to update if key exists - sequelize

  16. 16

    I got message for error_log file "The stream or file ".../laravel.log" could not be opened: failed to open stream: Permission denied"

  17. 17

    Servlet: HTTP Status 404 - Not Found

  18. 18

    Type 'Moment' is not assignable to type 'Date'. Property 'toDateString' is missing in type 'Moment'

  19. 19

    what is key in CTTelephonyNetworkInfo().serviceSubscriberCellularProviders and CTTelephonyNetworkInfo().serviceCurrentRadioAccessTechnology

  20. 20

    Laravel(ajax) 404 not found

  21. 21

    Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters

HotTag

Archive