How to push to Observable of Array in Angular 4? RxJS

Question

I have a property on my service class as so:

articles: Observable<Article[]>;

It is populated by a getArticles() function using the standard http.get().map() solution.

How can I manually push a new article in to this array; One that is not yet persisted and so not part of the http get?

My scenario is, you create a new Article, and before it is saved I would like the Article[] array to have this new one pushed to it so it shows up in my list of articles.

Further more, This service is shared between 2 components, If component A consumes the service using ng OnInit() and binds the result to a repeating section *ngFor, will updating the service array from component B simultaneously update the results in components A's ngFor section? Or must I update the view manually?

Many Thanks, Simon

Just to confirm, Simply put, how does one directly modify the array that this Observable contains? — simon_www
– simon_www, Commented Nov 22, 2017 at 0:51

Richard Matsen · Accepted Answer · 2017-11-22 06:16:28Z

11

As you said in comments, I'd use a Subject.

The advantage of keeping articles observable rather than storing as an array is that http takes time, so you can subscribe and wait for results. Plus both components get any updates.

// Mock http
const http = {
  get: (url) => Rx.Observable.of(['article1', 'article2']) 
}

const articles = new Rx.Subject();

const fetch = () => {
  return http.get('myUrl').map(x => x).do(data => articles.next(data))
}

const add = (article) => {
  articles.take(1).subscribe(current => {
    current.push(article);
    articles.next(current);
  })
}

// Subscribe to 
articles.subscribe(console.log)

// Action
fetch().subscribe(
  add('article3')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

answered Nov 22, 2017 at 6:16

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

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

6 Comments

Richard Matsen Over a year ago

Since articles is an observable, the components subscribe to it (in javascript) or use it directly on a template with the async filter. So since they connect via a reactive pipeline, they will update automatically whenever the Subject is updated.

Richard Matsen Over a year ago

Note, you can vary the type of Subject used depending on when components do the subscribing. A plain Subject is probably fine for components that subscribe in ngOnInit or in the template, but if they subscribe late in the app flow (say ComponentB is on a secondary page), you may want to use a ReplaySubject which stores the last value and 'replays' it for new subscriptions.

Richard Matsen Over a year ago

I tend to think of Subject as the socket that components plug into, but it has no storage. ReplaySubject is a socket with (configurable) storage, and BehaviorSubject has storage for one item but can take an initial value - useful for providing some default value for components before the fetch has filled in it's value.

simon_www Over a year ago

Marked this as complete because I can see this is the right answer. I am however having problems with it working in my app. Would you be happy to continue a discussion with me to try and solve the issue i'm having?

Richard Matsen Over a year ago

Sure thing. How do you want to do it -is it something you can add to the question?

|

ehrencrona · Accepted Answer · 2017-11-22 02:52:12Z

Instead of storing the whole observable, you probably want to just store the article array, like

articles: Article[]

fetch() {
    this.get(url).map(...).subscribe(articles => this.articles)
}

Then you can manipulate the articles list using standard array manipulation methods.

If you store the observable, it will re-run the http call every time you subscribe to it (or render it using | async) which is definitely not what you want.

But for the sake of completeness: if you do have an Observable of an array you want to add items to, you could use the map operator on it to add a specified item to it, e.g.

observable.map(previousArray => previousArray.concat(itemtToBeAdded))

yfdgvf asdasdas · Accepted Answer · 2019-02-26 21:08:56Z

ex from angular 4 book ng-book

Subject<Array<String>> example =  new Subject<Array<String>>();


push(newvalue:String):void
{
  example.next((currentarray:String[]) : String[] => {
    return  currentarray.concat(newValue);
   })

}

what the following says in example.next is take the current array value Stored in the observable and concat a new value onto it and emit the new array value to subscribers. It is a lambda expression.I think this only works with subject observables because they hold unto the last value stored in their method subject.getValue();

Collectives™ on Stack Overflow

How to push to Observable of Array in Angular 4? RxJS

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related