Combining and consolidating data from state using Angular with ngrx

Question

Combining and consolidating data from state using Angular with ngrx

I've been struggling to come up with a way to create a grouped and summarized array of values (to be used with ngFor) from a list of objects, but I just can't seem to get it right. The data, which is a subset of my state, is structured like this:

[{name: "A", value: 1, desc: 'something irrelevant'}, 
 {name: "A", value: 3, desc: 'also other properties'}, 
 {name: "B", value: 2, desc: 'etc.'}, 
 {name: "B", value: 5, desc: 'etc.'}]

The desired result that I'm aiming for is something similar to (note the different data type):

[{name: "A", value: 4}, {name: "B", value: 7}]

In essence, I want to identify the unique "names" and calculate the total "value" for all objects with that name, in a format suitable for ngFor | async.

My solution that I got close to working is:

       this.aggregates:Observable<any[]> = this.store
        .select(state => state.valuesList)
        .map(valuesList => valuesList.sort((a,b) => {return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);} }))
        .flatMap(valuesList => valuesList)
        .map(value => value.name)
        .distinct();

I'm fine with this start, yet the issue arises when I try to use toArray(). If I skip it, Typescript throws an error "Type string is not assignable to type any[]"; when I include toArray() after distinct(), no results are returned upon subscribing.

What am I missing here? Should I consider moving this logic to the reducer, even though I'm uncertain if I can change the type of objects returned by different actions within the same reducer? Any guidance would be greatly appreciated.

UPDATE: I would greatly appreciate a functioning implementation of groupBy(), as it seems to perfectly fit this scenario.

angular typescript rxjs ngrx-store

Answer 1

Answer №1

If you want to achieve the desired outcome, you can utilize the groupBy method. However, it is important to apply the groupBy operator to an observable that is derived from the list since groupBy expects an observable containing items.

In the code snippet below, the variable slice is essentially equal to

this.store.select(state => state.valuesList)

const slice = Rx.Observable.of([
  { name: "A", value: 1, desc: "something irrelevant" },
  { name: "A", value: 3, desc: "also other properties" },
  { name: "B", value: 2, desc: "etc." },
  { name: "B", value: 5, desc: "etc." }
]);

const grouped = slice.concatMap(list => Rx.Observable
  .from(list)
  .groupBy(item => item.name)
  .mergeMap(group => group
    .reduce((total, item) => total + item.value, 0)
    .map(total => ({ name: group.key, value: total }))
  )
  .toArray()
);

grouped.subscribe(value => console.log(value));

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/rxjs@5/bundles/Rx.min.js"></script>

Answer 2

If you want to achieve the desired outcome, you can utilize the groupBy method. However, it is important to apply the groupBy operator to an observable that is derived from the list since groupBy expects an observable containing items.

In the code snippet below, the variable slice is essentially equal to

this.store.select(state => state.valuesList)

const slice = Rx.Observable.of([
  { name: "A", value: 1, desc: "something irrelevant" },
  { name: "A", value: 3, desc: "also other properties" },
  { name: "B", value: 2, desc: "etc." },
  { name: "B", value: 5, desc: "etc." }
]);

const grouped = slice.concatMap(list => Rx.Observable
  .from(list)
  .groupBy(item => item.name)
  .mergeMap(group => group
    .reduce((total, item) => total + item.value, 0)
    .map(total => ({ name: group.key, value: total }))
  )
  .toArray()
);

grouped.subscribe(value => console.log(value));

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/rxjs@5/bundles/Rx.min.js"></script>

Answer 3

Answer №2

Here's an example snippet of code:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';

function processValues() {
    const data = [
        { name: "C", value: 3, desc: 'other details' },
        { name: "A", value: 1, desc: 'irrelevant info' },
        { name: "B", value: 2, desc: 'etc.' },
        { name: "A", value: 3, desc: 'other properties' },
        { name: "B", value: 5, desc: 'etc.' }
    ];

    const dataStream = Observable.from(Array(100).fill(data));

    const modifiedData: Observable<any[]> = dataStream
    .map((valuesList) => valuesList
        .map((x) => ({ name: x.name, value: x.value }))
        .sort((a, b) => a.name.localeCompare(b.name))
        .reduce((pre, cur) => {
            const len = pre.length - 1;

            if (pre[len] && pre[len].name === cur.name) {
                pre[len].value += cur.value;
                return pre;
            }
            pre[len + 1] = cur;
            return pre;
        }, [])
    );

    return modifiedData;
}

processValues().subscribe((result) => {
    console.dir(result, { depth: null });
});

The processed output is demonstrated below:

[ { name: 'A', value: 4 },
  { name: 'B', value: 7 },
  { name: 'C', value: 3 } ]
[ { name: 'A', value: 4 },
  { name: 'B', value: 7 },
  { name: 'C', value: 3 } ]
[ { name: 'A', value: 4 },....

Answer 4

Here's an example snippet of code:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';

function processValues() {
    const data = [
        { name: "C", value: 3, desc: 'other details' },
        { name: "A", value: 1, desc: 'irrelevant info' },
        { name: "B", value: 2, desc: 'etc.' },
        { name: "A", value: 3, desc: 'other properties' },
        { name: "B", value: 5, desc: 'etc.' }
    ];

    const dataStream = Observable.from(Array(100).fill(data));

    const modifiedData: Observable<any[]> = dataStream
    .map((valuesList) => valuesList
        .map((x) => ({ name: x.name, value: x.value }))
        .sort((a, b) => a.name.localeCompare(b.name))
        .reduce((pre, cur) => {
            const len = pre.length - 1;

            if (pre[len] && pre[len].name === cur.name) {
                pre[len].value += cur.value;
                return pre;
            }
            pre[len + 1] = cur;
            return pre;
        }, [])
    );

    return modifiedData;
}

processValues().subscribe((result) => {
    console.dir(result, { depth: null });
});

The processed output is demonstrated below:

[ { name: 'A', value: 4 },
  { name: 'B', value: 7 },
  { name: 'C', value: 3 } ]
[ { name: 'A', value: 4 },
  { name: 'B', value: 7 },
  { name: 'C', value: 3 } ]
[ { name: 'A', value: 4 },....

Combining and consolidating data from state using Angular with ngrx

Answer №1

Answer №2

Similar questions

Why is it that I am able to invoke my Redux action creators from the componentWillMount() method, but not from my event handler function?

Is it possible to make the 'keyof' property optional?

Simulating TypeDI service behavior in Jest

Exclude the use of ':any' in React component

Error encountered when utilizing ReactiveForms and NgbModal: ExpressionChangedAfterItHasBeenCheckedError

Guide to creating unit tests using Mocha, JsDom, and Angular

Achieve a main-menu container with a full width dropdown using Bootstrap 4

Using Angular 7 with FileSaver.js

Encountered an issue trying to access undefined properties while reading 'PP'

Utilizing Next.js to Import a Function from a Path Stored within an Environment Variable

Angular universal triggers an "Error at XMLHttpRequest.send" issue

typescript function intersection types

The error message "Property 'listingSub$' is not initialized in the constructor and is not definitely assigned" needs to be addressed and fixed in the code

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

Set every attribute inside a Typescript interface as non-mandatory

Sophisticated method for retrograding every Angular component for AngularJS

The FormGroup instance does not return any input method when using the get input function

Image uploads are a challenge for Angular

Contrast between sourcing a file from the current directory versus from the node_modules folder

Tips on transferring data to a parent component without dismissing the Angular Material dialog when a button is clicked