Can you provide guidance on converting a generic observable into a specific data model within rxjs 6/Angular 6?

I am currently working with Angular 6 and RxJs 6. The backend api I am using sends the response with a generic class object, meaning that the response data model is not static. However, there is an indicator included in the response that tells me what model is being passed in. Here is some code to illustrate this:

interface orderSummary {...}
interface orderDetail {...}
interface IResponse {
    objectType: string;
    objectData: any
}

GetGenericDataModel() {
    return this.httpClient.get<IResponse>(`../api/method`)
        .map?flatmap?pipe?( -->what should I use here?
            (response) => {
                 if (response.objectType === 'orderSummary')
                    return response.objectData.ToOrderSummary --> how to convert to orderSummary
                 else if (response.objectType === 'orderDetail')
                    return response.objectData.ToOrderDetail --> how to convert to orderDetail                           
            }
        );
}

When fetching results on the client side using http.get, I need to convert/transform the response data into my pre-defined interface (either orderSummary or orderDetail) based on the response indicator (objectType). How can I utilize rxjs to achieve this conversion/transformation of the response data into my pre-defined interface in Angular 6?

Answer №1

Give this a shot:

RetrieveGenericDataModel() {
    return this.httpClient.get(`../api/method`).pipe(
        map(json => {
            if(json.objectType === 'orderSummary') {
                // The server must ensure that objectData.orderSummary matches orderSummary
                return json.objectData.orderSummary
            } else if(json.objectType === 'orderDetail') {
                // The server must ensure that objectData.orderDetail matches orderDetail
                return object.objectData.orderDetail
            } else {
              throw new Error('unsupported...')
            }
        })
    );
}

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

Using Twitch OAuth with Nebular in Angular

For a friend, I am in the process of developing a custom website using the Nebular package. I want users to log in with their Twitch accounts to access the site, but I am encountering issues with the NbAuthModule. Below is the code snippet: app.module.ts ...

The ActivatedRoute in Angular2 is displaying an error message stating "Cannot resolve all parameters for Detail_retail

Currently, I am working with Angular JS version 2.0.0 where I am passing values through my code: import {Component} from "angular2/core" import {bootstrap} from 'angular2/platform/browser'; import {Users} from "../users/component" import {Users_ ...

One-of-a-kind data connection

I'm facing a challenge with data-bindings that I can't quite crack. It seems like my lack of expertise in the Angular domain might be the root cause. If you have a solution, I would greatly appreciate it if you could provide a brief explanation ...

The Material-ui Datagrid may experience instability and require frequent refreshing

Here is the code snippet I'm using to retrieve data from an API and bind it to the Material UI DataGrid. The version being utilized is "@mui/x-data-grid": "^7.18.0". There seems to be a flickering issue with the highlighted section at the end, and it ...

Out of the blue, I encountered an issue while trying to install Express in node.js using Types

Encountered a failure while attempting to install Express with node.js in Typescript. Received the following warning: https://i.sstatic.net/XcrGX.png Performed npm initialization, started index.js, created tsconfig.json, and installed ts-node. The comman ...

Error encountered while defining properties for React Three's Text component in react-three/drei [TypeScript compilation error]

The Challenge Overview In my quest to develop a VR web application using React Three and XR libraries, I have encountered a TypeScript error during the build process. The issue seems to revolve around missing properties while constructing the Text compone ...

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file: import { Component, ViewEncapsulation } from "@angular/core"; import { FormControl } from "@angular/forms"; /** @title Select with multiple ...

Typescript is struggling to accurately infer extended types in some cases

My goal is to optimize the body of a NextApiRequest for TypeScript. I currently have this code snippet: // This is a type from a library I've imported export interface NextApiRequest { query: Partial<{ [key: string]: string | string[]; ...

Issue with Props Type Check not functioning as expected in Typescript with React

I am utilizing Typescript within my React application. I aim to rigorously verify the type of props being passed to my components and trigger an error if it does not match. import React from "react"; import styles from "./ServiceDetailCard.css"; type Ser ...

reconfigure components by resetting settings on a different component

In the interface, I have a section that displays text along with a unique component titled FilterCriteriaList. This component includes custom buttons that alter their color when clicked. My goal is to reset the settings in the FilterCriteriaList component ...

What is the best way to access data in a node.js application from IONIC typescript via a REST API?

Here is the structure of my service.ts: import { Injectable } from '@angular/core'; import {Http, Headers} from '@angular/http'; import 'rxjs/add/operator/map'; /* Generated class for the PeopleSearch provider. See http ...

Having trouble compiling Typescript files on Angular 2 using Visual Studio 2015?

I recently followed Zach's advice and set up a new project in Visual Studio 2015 using .NET 5 to run Angular 2 with Typescript. Everything seemed to be working fine, but I encountered a small issue: MyApp.ts : import { Component } from "angular2/cor ...

Strategies for handling HTML content in the getProduct API call using Angular resolve

Components and Services Setup export class ProductComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router, ) { } ngOnInit() { this.route.data .subscrib ...

Typescript is unable to comprehend that the initial item in an array of strings is considered to be a string

Here are the functions I am working with: const transitionGroup = ( propertyName: string, durationMultiple = 1, timingFunction = 'linear', delayMultiple = 0, ): string => { // ...more logic here return [propertyName, duration, tim ...

Changing the Angular 5 ng-bootstrap Modal Dialog template dynamically in real-time

I'm currently developing a modal dialog that requires the ability to dynamically change the templateURL. The code shown is the default template, but I need to be able to swap it out dynamically. I'm unsure of how to achieve this, as the templateU ...

Creating a progressive prototype chain in TypeScript: A step-by-step guide

With JavaScript, it is possible to create a "derived class" whose "base class" is dynamic using code like the following: function NewBaseClass(sF) { function DynamicBaseClass(iF) { this.instanceField = iF; } // EDIT: oops, this is not really static i ...

Guidance on Sending Slider Values to a React Form within a Component

I am currently developing a React application using Typescript. One of the features I implemented is a multi-step form, where each form page is its own component and fields are individual components as well. While I can successfully view data from Text Fie ...

Creating dynamic components from JSON elements does not trigger a rerender of components within an array

Imagine having a simplified input structure like this: [ { type: "text", text: "how are you {name}" }, { type: "input", input: "name" }, { type: "text", text: "good to ...

Are React component properties enclosed in curly braces?

I have a new component configured like this: type customType = differentType<uniqueType1, uniqueType2, uniqueType3>; function customComponent({q}: customType) When called, it looks like this: <customComponent {...myCustomVar} />, where myCus ...

Converting TypeScript to ES5 in Angular 2: A Comprehensive Guide

I am currently diving into Angular 2 and delving into Typescript to create simple applications within the Angular 2 framework. What I have discovered is that with Typescript, we can utilize classes, interfaces, modules, and more to enhance our application ...