Tips for updating an Observable array in Angular 4 using RxJS

Question

Tips for updating an Observable array in Angular 4 using RxJS

Within the service class, I have defined a property like this:

articles: Observable<Article[]>;

This property is populated by calling the getArticles() function which uses the conventional http.get().map() approach.

Now, my query is about manually adding a new article to this array - one that has not yet been persisted and hence is not obtained through http get.

Here's the scenario: You create a new Article instance, but before saving it, I want this new object to be pushed into the Article[] array so that it appears in the list of articles.

Moreover, this service is shared between two components. If component A utilizes the service with ng OnInit() and binds the result to a repeated section using *ngFor, will updating the service array from component B automatically reflect the changes in the results displayed in component A's ngFor loop? Or do I need to update the view manually?

Thank you, Simon

javascript angular rxjs observable

Answer 1

Answer №1

Like you mentioned in the comments, I would opt for using a Subject.

The benefit of keeping articles observable rather than storing it as an array is that HTTP calls take time, so by subscribing, you can wait for results. Additionally, both components receive any updates.

// Simulated 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>

Answer 2

Like you mentioned in the comments, I would opt for using a Subject.

The benefit of keeping articles observable rather than storing it as an array is that HTTP calls take time, so by subscribing, you can wait for results. Additionally, both components receive any updates.

// Simulated 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>

Answer 3

Answer №2

To optimize storage, it is recommended to store only the article array instead of the entire observable. You can achieve this by declaring:

articles: Article[]

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

By doing this, you can easily manipulate the articles list using standard array manipulation methods.

Storing the observable would result in repeating the http call every time you subscribe to it (or use it with | async), which may not be desirable behavior.

However, if you must add items to an Observable array, you could utilize the map operator as shown below:

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

Answer 4

To optimize storage, it is recommended to store only the article array instead of the entire observable. You can achieve this by declaring:

articles: Article[]

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

By doing this, you can easily manipulate the articles list using standard array manipulation methods.

Storing the observable would result in repeating the http call every time you subscribe to it (or use it with | async), which may not be desirable behavior.

However, if you must add items to an Observable array, you could utilize the map operator as shown below:

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

Answer 5

Answer №3

Example from the 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);
   })

}

In this code snippet, the example.next function is taking the current array value stored in the observable, adding a new value to it using the concat method, and then emitting the updated array value to subscribers. This functionality is achieved through a lambda expression. It's important to note that this implementation specifically works with Subject observables, as they retain the last value stored in their method subject.getValue();

Answer 6

Example from the 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);
   })

}

In this code snippet, the example.next function is taking the current array value stored in the observable, adding a new value to it using the concat method, and then emitting the updated array value to subscribers. This functionality is achieved through a lambda expression. It's important to note that this implementation specifically works with Subject observables, as they retain the last value stored in their method subject.getValue();

Tips for updating an Observable array in Angular 4 using RxJS

Answer №1

Answer №2

Answer №3

Similar questions

Navigating efficiently with AngularJS directives

A guide on breaking down the ID passed from the backend into three segments using React JS

Struggling to get the Okta Auth0's AuthGuard to properly redirect to a specific route following a successful login request for a protected route

The consistent failure of the 201 status node express API is causing major

Exploring MongoDB through proxyquire

What is the best way to ensure that my $.ajax POST call works seamlessly with SSL?

An error is thrown when attempting to use npm install, stating "integrity checksum failed. The expected sha1 checksum was sha1-6G...=, but the actual checksum was sha512

How do you implement a conditional radio button in Angular 2?

Next JS restricts XLSX to return only 100 objects as an array of arrays

Do you typically define a static variable within a function using `this.temp`?

Create a custom JavaScript library by incorporating an external library into it as a bundle

Unlocking the potential: passing designated text values with Javascript

The Jquery .clone() function presents issues in Internet Explorer and Chrome browsers, failing to perform as expected

Harnessing the Power of NextJS Image Component and @svgr/webpack for Seamless Integration

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

Struggling to retrieve posted data using Angular with asp.net

I am experiencing some issues with the functionality of the Bootstrap carousel on my website's homepage

Utilizing React JS to call a static function within another static function when an HTML button is clicked

Retrieve the HTML data and save it as page.html, displayed in a VueJS preview