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

Question

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.

Fan Cheung Fan Cheung · Accepted Answer · 2019-09-04T10:14:37

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));

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

1 Answers