0

let's say we have an array of objects as shown below:

[
    0: {'id': 0, 'title': 'ABC', value: '113' },
    1: {'id': 1, 'title: 'BCD', value: '242' },
    ...
    99: {'id': 99, 'title: 'ZAQ', value: '971' },
]

The array of objects are information required in different component of the application. For example, component A only needs to obtain the updated data of id=0 while component B only needs id=2, id=6. The array of objects will change overtime, thus, there is a subject that contains it.

The array of changed objects is emitted to the various components show below:

   private testSubject = new Subject<any>();

   public notifyTestChanged(changedData: any): void {
       this.testSubject.next(changedData);
   }

   public onTestChanged(): Observable<any> {
       return this.testSubject.asObservable();
   }

The different component subscribe to testSubject to get the array and i am looping through the arrays to find if the object exists in the changed object array.

onTestChanged.subscribe((changedData) => 
   changedData.find((data) => 
      return componentchanged.id === data.id))
 // componentchanged.id is a parameter in the component, an identity for component.

Is there a way to subscribe to the changes without needing to loop through the array of objects in each components to get the desired data the component needed? I am avoiding creating 1 subject for each object as the array of objects may contain hundreds of objects.

Zainu
  • 794
  • 1
  • 12
  • 23
  • Please review the accepted answer to this question as it is a native JS solution without the need for extra libraries: https://stackoverflow.com/questions/43177855/how-to-create-a-deep-proxy – Randy Casburn Dec 04 '18 at 04:14

2 Answers2

0

Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.

The idea is similar to a Newspaper subscription. If you have subscribed anytime a new paper or array information is changed it is published to whatever has subscribed.

Here is a gitHub repo with working examples https://github.com/NativeScript/nativescript-sdk-examples-js/tree/master/app/ns-framework-modules-category/observable-array/basics

or check out the example I found here https://angular.io/guide/observables

And here is another example I found here https://docs.nativescript.org/ns-framework-modules/observable-array

const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;

// Create ObservableArray with lenght
let myObservableArray = new ObservableArray(10);

// Create ObservableArray from array.
const arr = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34];
myObservableArray = new ObservableArray(arr);
// Create ObservableArray from arguments.
myObservableArray = new ObservableArray(1, 2, 3, 5, 8, 13, 21, 33, 55, 89);


const firstItem = myObservableArray.getItem(0);
const secondItem = myObservableArray.getItem(1);
const thirdItem = myObservableArray.getItem(2);

myObservableArray.on(ObservableArray.changeEvent, (args) => {
console.log(args.index); // Index of the changed item (in this case 7).
console.log(args.action); // Action (In this case "update")
console.log(args.addedCount); // Number of added items (In this case 1).
console.log(args.removed); // Array of removed items (in this case 33).
});    
myObservableArray.setItem(7, 34); // at seventh (7) index setting value of 34
Brendan
  • 119
  • 11
0

I think your best bet is to use ngrx. you can find their docs here https://ngrx.io/guide/store. Your object is kept in memory (store) through out your app. And If the store ever gets updated it will automatically update whoever is using it in the application. Check it out, sounds like it will help you out a lot. there is a bunch of code you need to write, but then it works beautifully.

Lys
  • 524
  • 5
  • 11