Cause (any changes made to an array) to trigger a function call. Vanilla JS

Question

The array is not a DOM element:

array = [0, 0, 0, 0, 0];

It's just hanging out in index.js for now. User clicks, fetch calls, etc. can change it. I want to somehow cause any change in the array to trigger a function call. Something like this:

when array.changesInAnyWay(){
doSomething();
}

Context:

-I think RxJS and thus observables require REACT, which I can't use for this project. I spent a lot of time trying to apply the observer pattern but it only broke the page and feels overkill anyway. -Similar limitation for MobX. I'm just using vanilla JS.

I think proxies should be a good solution, but I am having a hard time figuring out how to apply them to my code. I tried imitating what I found in discussions like these, but neither worked.

Detecting changes in a Javascript array using the Proxy object https://codeburst.io/understanding-javascript-proxies-by-examining-on-change-library-f252eddf76c2

I spent two hours trying to implement the latter with this:

const onChange = require('./js/on-change');
const foo = onChange({
a: generalArray
}, () => console.log(foo));

Can anyone nudge me (or write!) some actual code that works? I've been Googling & trying things all week.

Raphael Castro · Answer 1 · 2020-01-12T19:50:13.777

0

I think you can use RXJS without react, and if you can this sounds like a perfect use case for a behaviorSubject

Outside of that you can build your own behaviorSubject by using promises and callbacks in vanilla javascript; for RXJS its easy:

definition:

import { BehaviorSubject } from 'rxjs';
messageSource = new BehaviorSubject(false);
currentMessage = this.messageSource.asObservable();

  changeMessage(message) {
    this.messageSource.next(message);
  }

usage

currentMessage.subscribe(val => {
//logic
})

use change in your setters for the classes and now you will be able to listen to any changes made.

edited Jan 12 '20 at 19:50

answered Jan 12 '20 at 05:43

Raphael Castro

907
1
8
26

for RXJS its easy – Raphael Castro Jan 12 '20 at 05:46
Thanks for the suggested code. That looks like Typescript. How would I modify it such that I don't get the red underlines below ```private```, ```boolean``` and the enhanced for loop? – Jan 12 '20 at 17:17
the red underlines are errors, hover your mouse over them to see what they are, or in vs code press f8 to peek the error; edit your question and add them so I can help you debug it. – Raphael Castro Jan 12 '20 at 17:41
The results of Peek Problem are the following: (1) Under ```private``` it says "Declaration or statement expected." (2) Under ```boolean``` it says "'type arguments' can only be used in a .ts file.ts(8011)". (3) Under the colon in the ```message: any``` it says "',' expected.ts(1005)". (4) Under the bracket immediately after that enhanced for loop it says "';' expected.ts(1005)." – Jan 12 '20 at 18:31
the issue is you don't have typescript installed, i took the type definitions off of the code, it should work now. – Raphael Castro Jan 12 '20 at 19:51
also, what is an enhanced for loop? – Raphael Castro Jan 12 '20 at 19:52
Sorry I don't know the proper JS name for it, but that ```( x : y )``` syntax reminds me of enhanced for loops from Java. Anyway, the code still doesn't compile because there's a red underline under the ```{``` in the line ```changeMessage(message) {``` – Jan 12 '20 at 20:03

Cause (any changes made to an array) to trigger a function call. Vanilla JS

1 Answers1