Standardize API response using NgRX Entity

Can the NgRx Entity library normalize a nested JSON api response? If I have data structured like this: 

[
    {
        "id": "1",
        "title": "My first post!",
        "author": {
            "id": "123",
            "name": "Paul"
        },
        "comments": [
            {
                "id": "249",
                "content": "Nice post!",
                "commenter": {
                    "id": "245",
                    "name": "Jane"
                }
            },
            {
                "id": "250",
                "content": "Thanks!",
                "commenter": {
                    "id": "123",
                    "name": "Paul"
                }
            }
        ]
    },
    {
        "id": "2",
        "title": "This other post",
        "author": {
            "id": "123",
            "name": "Paul"
        },
        "comments": [
            {
                "id": "251",
                "content": "Your other post was nicer",
                "commenter": {
                    "id": "245",
                    "name": "Jane"
                }
            },
            {
                "id": "252",
                "content": "I am a spammer!",
                "commenter": {
                    "id": "246",
                    "name": "Spambot5000"
                }
            }
        ]
    }
]

Is it possible to flatten this structure with NgRx Entity, and if so, how can it be achieved?

I have attempted to use the normalizr library to flatten the object successfully, but integrating it with NgRx helper functions like createReducers() and createActions() has been challenging. Any suggestions on how to proceed?

angulartypescriptreduxrxjsngrx

Answer №1

Contrary to popular belief, the library @ngrx/entity does not offer any normalization utilities. Instead, it mainly focuses on providing CRUD actions for storing and retrieving collections in the store.

Answer №2

Of course

It seems like you have a scenario where you need to manipulate data similar to what is described in the official documentation ():

loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        // map -> transform your response accordingly
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => EMPTY)
      ))
    )
  );

To address this issue, you can add another mapping function before processing the movies array. Utilizing lodash functions might be beneficial for achieving this.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the true function of the `as` keyword within a mapped type?

I am new to typescript and I find the usage of as confusing in the following example. type foo = "a" | "b" | 1 | 2; type bar = { [k in foo as number]: any } This example passes type checking. The resulting bar type is transformed i ...

typescript

Is it possible to utilize @ViewChild() or a similar method with a router-outlet? If yes, how can it be

There is a recurring situation I encounter where I find myself wanting to access a child component located on the opposite end of a router outlet instead of through a selector: For example: <router-outlet></router-outlet> NOT: <selector-na ...

angularangular2-routingangular2-services

How to Switch to a Different Tab in a NativeScript TabView

I'm struggling to figure out how to programmatically navigate to a different tab within a tabView from a partial View. Each tab is located in a child folder with its own html, ts, js, and css files. In this scenario, when a user clicks on an item in a ...

typescriptnavigationnativescript

I'm struggling to find a solution to this pesky TypeScript error that keeps popping up in the button component's styling. How can

An error related to style is appearing: <Button style = No overload matches this call. Overload 1 of 3, '(props: { href : string; } & { children?: React Node; classes?: Partial<Button Classes> | undefined; color?: "primary" | ...

reactjstypescriptnext.jsstylesreact-css-modules

Creating a View-Model for a header bar: A step-by-step guide

I am looking to develop a View-Model for the header bar using WebStorm, TypeScript, and Aurelia. In my directory, I have a file named header-bar.html with the following code: <template bindable="router"> <require from="_controls/clock"></ ...

javascriptangulartypescriptwebstormaurelia

An issue arose when trying to display React components within an Angular application

Attempting to incorporate React components into an Angular 7 application has been a challenge for me. While I have successfully rendered simple React components, I encountered the following error message (displayed in the browser console) when attempting t ...

javascriptangularreactjsapache-superset

Best practices for setting up PDAs in the Solana Anchor framework

Trying to create a basic Solana Program using Rust/Anchor that involves a PDA is causing a CPI error upon invocation, even though there doesn't appear to be any CPI happening (possibly due to the PDA account initialization). Below is the Program code ...

typescriptrustblockchainanchorsolana

Get rid of the filter arrows in the top row of a styled SpreadJS spreadsheet

Exploring SpreadJS for the first time has been an interesting journey as I dive into understanding table styling. While trying to apply styles across the entire table, I noticed a peculiar issue that arises. Upon applying a theme, whether it be custom or ...

angularspreadjs

What steps can I take to fix error TS7015 in my TypeScript, Next.js, and React application when I encounter an index expression that is not a number data type?

I encountered an error stating "Element implicitly has an 'any' type because the index expression is not of type 'number'.ts(7015)" The file I imported is import { useAmazon } from "@context/amazon"; I used it as follows con ...

javascriptreactjsjsontypescriptnext.js

Setting the "status" of a queue: A step-by-step guide

I created a function to add a job to the queue with the following code: async addJob(someParameters: SomeParameters): Promise<void> { await this.saveToDb(someParameters); try { await this.jobQueue.add('job', ...

javascripttypescriptqueuetask-queuebull-queue

Angular is facing a challenge in locating the main parent based on its class interface

After reading the angular documentation here, I implemented a Parent class like this: export abstract class Parent {} In the AlexComponent, I set this component as the Parent for its children with the following code: providers: [{ provide: Parent, useExis ...

angularparent-childangular14angular-providersangular-dependency-injection

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...

htmlnode.jstypescriptdomdomparser

Angular2 encountered a TypeError stating that self._el_11 is not a valid function

Looking to attach an event listener to an input field? Check out the code snippet below: <input ref-search (keyup)="search(search.value)"> Here is the corresponding search method: search(condition: string){ console.log(condition); } When ente ...

angulartypescripttypeerrorkeyup

Is it possible to associate a generic TypeScript type with another type by utilizing its generic parameters?

I am faced with a situation where I have a family of APIs consisting of various related generic types (along with associated constraints). To illustrate this, I have crafted an example using familiar types as placeholders for better understanding. As I wo ...

typescripttypescript-generics

tinyMCE5 has a quirky habit of inserting p tags without warning, but only when using

My editor with tinymce5 works well on Chrome and other browsers, but in Mozilla Firefox each line in the editor gets an additional p tag. I am using it with Angular. Currently, I have initialized the editor like this: <editor name="resultEditor" ...

angularfirefoxtinymcetinymce-5tinymce-3

Issue encountered during execution of tests involving reactive forms

Having some issues with the code below and looking for a solution. The tests pass when mocking the form for ts tests, but encounter an error when mocking the same form for html: No value accessor for form control with name: 'Enable' If I remov ...

angularkarma-jasmineangular-reactive-forms

ReactJS Provider not passing props to Consumer resulting in undefined value upon access

Hey there! I've been facing an issue with passing context from a Provider to a consumer in my application. Everything was working fine until suddenly it stopped. Let me walk you through a sample of my code. First off, I have a file named AppContext.t ...

reactjstypescript

Error message: Angular 2 JsonpModule import not defined

Within my app.module.ts file, I have the specified code import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {JsonpModule} from '@angular/http'; import {AppComponent} from & ...

angular

Currently, I'm harnessing the power of TypeScript and React to identify and capture a click event on a dynamically generated element within my document

Is there a way to detect a click on the <p> tag with the ID of "rightDisplayBtn"? I've tried using an onclick function and event listener, but neither seem to be working as expected. function addDetails() { hideModal(); addBook ...

reactjstypescriptreact-typescript

Can anyone provide assistance on implementing multiple where conditions in a loop with Firebase and Angular?

I've been attempting to implement dynamic conditions on a firebase query, but I'm having issues getting it to work. I even tried using chatgpt, but that didn't provide me with the ideal solution either. Can someone please assist me in resolv ...

angularfirebasegoogle-cloud-firestoreangularfire