2

I am creating an angular v4 app. I have the following data.

currentCount={
name:'myName',
count:0
};

Here the user will change the above object with the relevant data. I want to create an observable out of this object so that whenever there is a change I can save(process) the data. Also, I want to pass the default data when the observable is subscribed to.

As I am a starting out with RXjs I feel lost.

Any help is appreciated.

4
  • 3
    You may want to look into a BehaviorSubject. See if that does what you are going for. If not, clarifying what it doesn't do that you want would help. Commented Jan 16, 2018 at 12:38
  • yes @bygrace that solves the initial value for my observable. But how do I create an observable for an object? Commented Jan 16, 2018 at 12:40
  • 1
    Maybe this will ease that lost feeling: reactivex.io/rxjs/manual/overview.html#behaviorsubject Commented Jan 16, 2018 at 12:40
  • @krv RxJs is about creating observable streams not observable objects. Some frameworks have created observable object and thats not this. It isn't like you have an object and you update a property on it and the observers get notified. A stream is more like a pipe that you construct and send messages down. Along the way observers can get the value and operators can change or filter out the value. Only people with the subject can send new messages down the pipe. A behavior subject is like a pipe with a message already inside of it. There is much more too it but I hope that clarifies. Commented Jan 16, 2018 at 12:44

2 Answers 2

3

This is not possible with RxJS 5 by default because it can't observe object properties. There used to be Object.observe() but it's discontinued so you shouldn't use it.

However (a little self promo), I'm the author of rxjs-ds package that combines RxJS 5 with window.Proxy objects and lets you create observable data structures (I'm planing to use it for some experimantal React + Redux applications where you could manipulate state by just changing object properties).

So for example you could use it like this:

import { ObservableObject } from 'rxjs-ds';

const original = {
  name: 'myName',
  count: 0
};

// Create an observable object from `original`
const proxied = new ObservableObject(original);

const currentCount = proxied.proxy;
const events = proxied.events;

// Create the observer that notifies me when updating object properties
events.onSet.subscribe(console.log);

// Note that I'm in fact modifying `proxied.proxy` and not the original object
currentCount['name'] = 'Rincewind';
currentCount['name'] = 'Twoflower';
currentCount['count'] = 42;

You can see live demo here: https://jsfiddle.net/42vp7pmw/3/

This prints to console the following output:

{property: "name", oldValue: "myName", newValue: "Rincewind", target: {…}}
{property: "name", oldValue: "Rincewind", newValue: "Twoflower", target: {…}}
{property: "count", oldValue: 0, newValue: 42, target: {…}}
Sign up to request clarification or add additional context in comments.

Comments

2

If think what you are looking for is:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
const subj = new BehaviorSubject('yourValueHere');
Observable<string> obs = subj.asObservable();
obs.subscribe(x => console.log(x));
//logs initial value
subj.next('nextValue');
//logs next value

A BehaviorSubject inherits from Observable and Observer. You could return a observable from your function/class while storing the subject and call next if the value changes. This emits the next value and all subscribers will be executed again.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.