Observing a particular element within an array using RxJs

I'm currently working on a project with Angular and struggling to grasp the concept of RxJs and how it can help me solve my issue.

For example, let's say I have a component that needs 2 objects of type Item

export class MyComponent {

    private obj1: Item;
    private obj2: Item;

    constructor(private dataService: DataStore) {

    }
}

and the Item object looks like this

export class Item {
    name: string;
    value: string;
}

In addition, I have a datastore for storing Items

export class DataStore {
    public itemList: Item[];

    constructor(private apiService: ApiService) {

    }

    public getItemsFromApi() {
        this.apiService.fetchItems(this.itemList)
            .subscribe(response => {
                this.itemList = response;
            }
    }
}

The DataStore uses a Service that communicates with an API to retrieve items.

My goal is to keep a real-time list of subscribed Items updated from the API. Each component requiring bindings to Items can add their items to this list, and the store will continuously fetch new Items from the API. These Items represent sensor data, so their values may change over time while their names remain constant.

Is there an efficient method that allows MyComponent to subscribe only to changes in obj1 and obj2 without concerning itself with other items? Or must I subscribe to the entire itemList and then filter out item1 and item2 manually?

Answer №1

If you're looking for a solution, consider implementing WebSocket technology. A helpful guide on this can be found at Angular WS

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting an Azure Web App deployment of a TypeScript Node.js application - encountering a 'service unavailable' message

I recently deployed a react-redux app on Azure using the 'Azure App Services' extension in VSCode. The project was based on the code from this repository: https://github.com/rokoroku/react-redux-typescript-boilerplate Unfortunately, when I try t ...

Unable to simulate Paginate function in jest unit testing

Currently, I am in the process of mocking the findAll function of my service. To achieve this, I have to decide whether to mock the repository function findAndCount within myEntityRepository or the paginate function of the nestjs-typeorm-paginate node modu ...

Retrieving an image from the image repository

Having issues with Ionic 3, Angular CLI 7, and Angular 5. I'm encountering difficulties in fetching an image from the library. The problem arises when calling getPicture function. The error message reads: “Object(WEBPACK_IMPORTED_MODULE_1__ioni ...

The 'isOpen' property cannot be bound to because it is not recognized as a valid property of the 'mat-autocomplete' component

Here is an example taken from the Autocomplete documentation section 13.3.5: <form class="example-form"> <mat-form-field class="example-full-width" appearance="fill"> <mat-label>Number</mat-label> ...

The username property in Angular is being read as undefined and causing an error

Currently, I am in the process of implementing a "Create" function to generate appointments and also include the User ID of the creator. To achieve this, I have set up models for "rendezvous" and "user." However, upon executing the project, I am encounteri ...

Storing JSON data in a variable using .subscribe is not possible in Angular

Currently, I am encountering an issue where I cannot successfully store the specific data obtained from a Post request into a variable. How can I resolve this and ensure that only the desired data is stored? After making a Post request and receiving back ...

Tips for adjusting the appearance of Material Cards in Angular 6

html: <mat-card class="custom-matcard-shape"></mat-card> css: .custom-matcard-shape { background-color: black; height: 400px; margin-top: 10px; border-radius: 25px; } I am looking to create a unique shape for my mat-card element. ...

Guide to organizing the table according to the values (timestamps) in a specific column

In one of the tables I'm working with, there is a column called uploadedOn. You can see it in action here: https://stackblitz.com/edit/angular-ivy-tntvst?devToolsHeight=33&file=src/app/app.component.ts 1: https://i.stack.imgur.com/aQ6wh.png. My g ...

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Being relatively new to Bootstrap 4, as I have only used version 3.3 on my previous project which did not utilize the flexbox grid system. Now that I am embarking on a new project, I find myself facing a challenge: I am struggling to apply the "text-alig ...

The ngx-bootstrap tooltip arrow adapts its color to match the boundaries that it is surrounded by,

https://i.sstatic.net/Gmv9l.png I am currently utilizing ngx bootstrap tooltip in my project. My goal is to modify the color of the arrow element as demonstrated below: .tooltip.customClass .tooltip-arrow { border-right-color: white; } However, I ha ...

Tips for displaying the string value of an elementFinder when encountering an error in protractor

I have the following code snippet: export async function waitTillClickable(e: ElementFinder): Promise<ElementFinder> { const conditions = EC.visibilityOf(e); await browser.wait(conditions, DEFAULT_TIMEOUT, `Element did not return ...

Transform XLS(x) files into an Angular Material Data Table

I'm currently tackling a project that involves importing data from an Excel spreadsheet, which may contain multiple sheets. My goal is to showcase this data in an Angular Material datatable. With the help of the npm - xlsx module, I've managed t ...

Error: The file named '/accounts.ts' cannot be recognized as a module within a Node.js API

After researching this issue, I have found some answers but none of them seem to solve my problem. Below is the code in my model file: // accounts.ts const mongoose = require('mongoose'); var autoincrement = require('simple-mongoose-autoi ...

Utilizing Angular for file uploads to display file information on the console

I am looking to display the file data on the browser console when a file is uploaded. I have tried it with .txt files, but now I need it to work for .docx, .pptx, and pdf files as well. Can anyone make this happen? ...

Having trouble with the setRoot() function not working properly in IONIC 3 after dismissing a modal menu. Any suggestions for a solution

Here is the code snippet I am using to display a modal from the HomePage. import { SignaturePage } from '../signature/signature' import { NavController, NavParams, ModalController } from 'ionic-angular'; @Component({ selector: &apo ...

Performing a HTTP GET request in Angular 2 with custom headers

I recently came across some posts discussing how to set headers in a GET request. The code snippet below demonstrates one way to do this: let headers = new Headers({ 'Accept': 'application/json' }); headers.append('Authorization&a ...

Issue with importing Typescript and Jquery - $ function not recognized

Currently, I am utilizing TypeScript along with jQuery in my project, however, I keep encountering the following error: Uncaught TypeError: $ is not a function Has anyone come across this issue before? The process involves compiling TypeScript to ES20 ...

No defined outcome when using a conditional input with a name attribute

I am facing an issue while trying to determine whether to show/hide mybutton. The console keeps throwing an error stating that mybutton is undefined whenever it tries to evaluate mybutton.disabled. To troubleshoot, I included a true statement: 1===1, but ...

retrieve document data from firestore using the service

Is there a way to get real-time data from a Firestore document using a service? According to Firebase's documentation, you can achieve this by following this link: https://firebase.google.com/docs/firestore/query-data/listen?hl=es#web-modular-api I ...

Ensuring the validity of function types in a generic manner

Is there a way, within the function definition itself, to impose a type constraint on the function? For example: type IMyFunc<P = any,R = any> = (p: P) => R; function myFunc<P = any, R = any>(p: P):R { ... } How can we ensure that the Typ ...