How do deal with nested Arrays/objects in BehaviorSubjects, Observables? - arrays

I generally have problems using rxjs with nested Objects or Arrays.
My current use-case is this:
{a: [
{b: 0, c:[{d:1}]},
{b: 1, e:[{f: 'someString'}]}
]
Task: Get and set the Observable or value of a,b,c,d,e,f. I also want to be able to subscribe to each property.
I had this Problem in a similar use-case with an Array of BehaviorSubjects:
Efficiently get Observable of an array BehaviorSubjects
I generally have problems to use the basic functionality of nested arrays/objects in rxjs.
The basic functionality I mean includes:
Array:
getting Element by Index
using for of/in on Arrays
setting an Element by Index
push, pop, shift, slice, splice, ...
Object:
getting Value by Property name
going into the nested tree: object.key1.key2.key3[3].key4 ...
setting Value by Property name
assign
for of/in loops
Generally:
Destructuring: e.g.: let [variable1, variable2] = someObject;
Maybe other stuff I forgot.
I dont know if and which functions are possible for which rxjs Objects and which make sense (for example you should be able to set values in an Observable directly). But coming from a background without rxjs, I have trouble to manage my rxjs Objects properly.
I think reason for this besides my lack of knowledge and understanding is, that
a. The rxjs Objects don't provide the functionality as I'm used to from normal arrays and objects. e.g.:
let variable1 = array[1].property;
//becomes this (see related stack-Question I mentioned earlier)
let variable2 = array.pipe(mergeMap(d=> d[index].pipe(map(d1 => d1[property]));
// -> what happens here? You first need to know what mergeMap,
// map is doing and you have 5 levels of nested inline functions.
b. To implement the those mentioned functionalities I need to go over the .pipe() function and use some function like mergeMap, map, pluck, ... Functions that aren't directly indicating that you can get the Observable of let's say 'e' in my example. Making something like object.a[1].e wierd to implement (at least I don't know how to do that yet)
EDIT:
I also want to note, that I still love the idea of rxjs which works well in angular. I just have problems using it to it's full extend, as I'm a bit new to angular and consequently rxjs.

I thin RX is mainly focus on dealing with async operations. Mutation of array and object we can perfectly use the methods comes natively with javascript if theres no existing operators. or you can create your own operator for mutation/iteration etc.
Will try to answer some of your question on array/objects mutation, they are actually very straight forward.
Array:
getting Element by Index
map(arr=>arr[index])
using for of/in on Arrays
map(arr=>arry.map(item=>....))
setting an Element by Index
tap(arr=>arr[index]=somevalue)
Object:
getting Value by Property name
pluck('name')
going into the nested tree: object.key1.key2.key3[3].key4 ...
pluck('key1','key2')
setting Value by Property name
map(obj=>({a:value,obj...}))
assign
lets say your really want some pick array index method as rxjs operator you can create something like, same as for..in operations.
const pluckIndex=(index)=>source=>source.pipe(map(arr=>arr[index]))
const source = of([2,3])
source.pipe(pluckIndex(1)).subscribe(x => console.log(x));

Related

Can I access state values from children components in an array?

I'm very new to React, in the process of learning it for a school project. I've tried searching for this answer thinking it'd be a fairly simple solution, but I'm having trouble finding a result that matches my scenario.
Essentially I'm looking to have an array of a specific component (e.g. Child), each holding a value in their state (e.g. { value: 2 } ). I'm looking to iterate through the array, accessing each component's state.value, and calculate a total from it.
My initial thought was to hold the array in the parent's state, and then iterate through the array doing something like this:
this.state.children.map(child => (
child.state.value
))
However, the result is coming back as 'value' being undefined, leading me to believe I can't access another component's state this way.
I also looked into using refs, as described in the following article:
https://www.geeksforgeeks.org/how-to-access-childs-state-in-react/
However, it seems as though that only lets me create a reference to a single child, meaning I would need a new reference for every child component in the array.
Any advice or sample code of what I could do (the more basic the better) would be greatly appreciated!

How can I update arbitrarily/dynamically nested data with immutability helper?

To update nested data with immutability helper, you usually hard-code the path to the data you want to update, sometimes with variables for keys. What do you do if the number of keys/indexes (that is, the depth of nesting) is also variable? I'm looking for a way to update data given an arbitrarily long list of keys. Given [0, 1, 1], I want to update data[0][1][1], or given [9], I'd like to update data[9].
Context: I have a deeply nested array of comments, where a nested comment is a reply to its parent, and I need to add/remove/edit comments based on which comment is selected.
It looks like Immutable.js has methods that work just like I'm describing:
Immutable.JS’s get() or getIn() methods … [access] properties via an array of strings, each of which represents a property key.
https://redux.js.org/recipes/using-immutablejs-with-redux#difficult-to-interoperate-with
Is there a good way to do this with immutability-helper? If not, it's not too late for me to switch to Immutable.js.
The helpers can be used on arbitrary objects, not just immutables. These include getIn, setIn, and updateIn:
Take a look at the docs, they are quite convinient and come with samples.
const { getIn } = require('immutable');
const myDynamicPath = [0, 1, 1];
getIn({ 1: { 2: { 3: 123 }}}, [1, 2, '3'], 'ifNotSet') // 123
PS: Take care when using numbers as keys, as they are always strings on objects. ImmutableJS (and native Map/Set) on the other hand can deal with arbitrary types in keys and are therefore type-strict when used on ImmutableJS collections. So if you ever convert that data object to an Immutable, you might have confusing results if you do not pay attention.

Vue.set() on nested array properties

i've been trying to trigger Vue DOM updates by updating an array the old way and it obviously wont do it because of the ceveats on Vue detecting object/array changes. I dont know how to access my nested array properties by using Vue.set. Normally i would access and assign my property like this (by the way this is a state in Vuex):
state.timelines[0].events[0].item.info = payload.info
I dont know how to access and assign that property with .set, i've tried a few combinations but they failed to work. Thanks.
Solution: when trying to alter an object property, even if its deep in nested arrays, just use: Vue.set(arrayA[indexA].arrayB[indexB].object('objectPropertyName', newValue))
If dealing with arrays use:
Vue.set(array, arrayIndex, newValue).

What is the difference between ObservableMap and ObservableArray in mobx

As per the documentation,
observable.map(values?) creates a dynamic keyed observable map.
Observable maps are very useful if you don't want to react just to the
change of a specific entry, but also to the addition or removal of
entries.
I may be the only one who doesn't understand the difference between these two mobx observable types. Even the doc says map can track addition or removal, following array also notifies the console by autorun when a new value is pushed into the array. So what is the real difference between the two?
window.q = observable([1,2,3]);
autorun(()=>{console.log(q[0]);})
q.push(32)
The difference is in the methods you use to interact with them. Think of one as an array, and the other as a map. Arrays stores indices, maps store keys and values.

Custom object change tracking in Typescript

I need to implement change tracking for state of any object.
How would I implement it?
For example:
let complexObject = {
/// ... mant many arrays and propertiess
}
let hash = convertToHash(complexObject)
let trackingArray = []
trackingArray.push(hash);
/// what from here and how to imlement it?
I would recommend you to use https://facebook.github.io/immutable-js/ when you change something you will get a new object. It will be much more efficient than creating a hash because you will not need to iterate the entire object graph.
Also it shares some memory internally so it will be more efficient than storing full clones in memory.
Assuming you are implementing change tracking for purpose of undo/redo functionality.
One way is to use immutable objects and store on stack old object each time when there is action invoked.
In order to capture change to objects you could use https://en.wikipedia.org/wiki/Command_pattern or redux (widely popular in react, implementation for angular).

Resources