The observable HTTP map appears to be more of a representation rather than a concrete entity

I seem to be struggling with understanding Typescript

I expected the returned observable to have a method getTitle(), but it seems to be missing. Instead, I am getting an object that resembles AttachableContentModel without that particular method. What is happening?

    export class AttachableContentModel extends AbstractPopupModel {
        Url: string;
        EmailAddress: string;
        StreetViewUrl: string;
        Images: Array<ImageModel>;
        Videos: Array<VideoModel>;
        Documents: Array<DocumentModel>;
        getTitle(): string {
            if (this.Name &&
                this.DisplayName &&
                this.Name !== this.DisplayName) 
                return this.Name + " (" + this.DisplayName + ")";
            return this.Name ? this.Name : this.DisplayName;
        };
        Silly: string;
    }

...

    fecthAttachableContent(request: AttachableContentRequest): Observable<AttachableContentModel> {

        return this.http
            .postAsJson(`${environment.apiBaseUrl}attachablecontent`, {})
            .map(res => res.json())
    }
angulartypescriptrxjsobservable

Answer №1

Instead of using a class, utilize an interface. The process of deserializing JSON objects into classes requires manual invocation of class constructors. Merely assigning to or returning as a compatible type will not impact runtime behavior.

Although someone suggested this may be a duplicate question, the answer provided is subpar and advocates for poor coding practices.

Even if you opt to manually call the class constructor, your data won't be truly isomorphic. It's advisable to keep the logic separate from your response and request types.

Define the structure of the objects exchanged through HTTP requests using interfaces.

The advantage of using an interface is that it simply serves as a type, allowing the deserialization function, like .json, to handle value creation. All you need to do is "cast" it. Despite resembling casting currently, when the type corresponds to a class, it can be misleading since the deserializer doesn't create instances through your class constructor.

When referencing Angular 2 documentation examples involving TypeScript, remember to approach them critically. These examples often neglect proper language usage and lack idiomatic expressions.

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

Troubleshooting issue with Angular 2 form values not binding correctly when set and disabled

Here is my code for updating the form if the user's information is available. if (this.user.landmark) this.uploadForm.controls['landmark'].setValue(this.user.landmark || ''); // Uncommenting disable will result in the landmark ...

angularangular-reactive-forms

Comparing two string dates in mongoose: A guide

I am trying to retrieve data between two specific dates in my Schema. transactionDate : String Here is the function I am using to get data between two dates: async getLogsByDate(start, end) { return await this.logModel .find({ date: { $gte: sta ...

node.jstypescriptdatemongoosegraphql

The process of utilizing RxJS for server polling is a

My goal is to constantly update client-side data by polling the server. To achieve this, I have set up a dispatcher that triggers an action labeled FRONT_PAGE. This action is initiated when the app launches and the client is supposed to send requests every ...

javascriptreactjsrxjsobservableobserver-pattern

"Utilizing Typescript's keyof operator on its own

I'm grappling with the challenge of creating a type that can utilize the typeof its own keys, but I'm hitting a roadblock. Below is a simplified version of what I'm attempting to achieve: type SpecialType = Record<string, (getter: <K e ...

typescript

Problem arises with connecting data in the relationship between a parent and child

Hi there, I am new to Angular 6 and currently encountering an issue with data binding. I have set up a test project with a parent-child relationship for data binding in the heading, but unfortunately, it's not working as expected. Can anyone lend me a ...

angulartypescript

Methods for resolving a ViewStyle typescript issue in react native

Trying to pass a width parameter into StyleSheet is causing an error like this: <View style={styles.children(width)}>{children}</View> Here's how I'm trying to use it: const styles = StyleSheet.create({ modalContent: { flex: ...

javascriptreactjstypescriptreact-nativereact-native-stylesheet

Using ngIf for various types of keys within a JavaScript array

concerts: [ { key: "field_concerts_time", lbl: "Date" }, { key: ["field_concert_fromtime", "field_concert_totime"], lbl: "Time", concat: "to" }, { key: "field_concerts_agereq", lbl: "Age R ...

arraystypescriptangular6javascript-objects

Can you explain the process for accessing a parent function in Angular?

I have a form component that inserts data into a database upon submission, and I need to update the displayed data in another component once it changes in the database. I attempted using ViewChild to invoke the necessary functions, but encountered issues w ...

angulartypescript

There were no visible outputs displayed within the table's tbody section

import React from 'react'; export default class HelloWorld extends React.Component { public render(): JSX.Element { let elements = [{"id":1,"isActive":true,"object":"Communication","previ ...

javascriptreactjstypescript

An issue has occurred: The type 'Observable<{}[]>' cannot be assigned to the type 'AngularFireList<any[]>'. This error is specific to Ionic framework

I encountered an issue while attempting to store data in the database as it is not getting saved and keeps showing errors. I am facing a problem with my .ts file where the code for this.tasks in the constructor is underlined in red, but I am unsure of th ...

angularfirebaseionic-frameworkfirebase-realtime-database

I am currently unable to retrieve any results for my fullcalendar tooltip

I am currently working on setting tooltips for events using Primeng's fullcalendar. Despite initializing the tooltip in the web console, I am unable to see it when hovering over an event. My development environment includes Typescript, Primeng 7.0.5, ...

angulartypescriptfullcalendartooltipprimeng

Developing with TypeScript - Utilizing the <reference path="....."> directive

Recently, I encountered an issue while adding a plugin to the TypeScript compiler. After including my code and compiling tsc.ts, it compiled without any errors. However, when I attempted to run it, I noticed that some variables declared in io.ts were missi ...

node.jstypescripttsc

Explore the Attribute and generate a Text-Node using the Renderer

Given the advice against directly accessing the DOM in Angular for various platforms, I am trying to figure out how to achieve the following using Renderer: a) Store the offsetLeft value of $event.target in a variable called left. b) Create a text node wi ...

angular

Uncertainty surrounding dynamic bootstrapping in @NgModules

After successfully installing rc7, my module and component are functioning as expected. Now, I am looking to utilize it on a webpage by only bootstrapping modules and components if the current page contains the necessary selector. Although I have declare ...

angularjsangular

Adding TypeScript definition file to an npm package: A step-by-step guide

Is it possible to include typescript definitions (.d.ts files) in a pure javascript project without using TypeScript itself? I'm struggling to find any information on how to do this directly in the package.json. ...

typescriptnpm

Enhancing CKEditor functionality with Angular 2 for improved textarea usage

Check out this Plunker example: https://plnkr.co/edit/aUBtpe?p=preview When using CKEditor, the value of the content variable does not update when changes are made to the textarea. It remains the same as the original page.content variable that was obtaine ...

angular

Is it possible to run Angular2 and Expressjs on separate ports?

I have set up my Angular2 application to use Expressjs as the backend. Both projects are structured within the same directory: /index.html <-- Angular index file /app.js <-- Expressjs /package.json /Gruntfile.js /bin <-- Expressjs bin ...

expressangular

Implementing a custom overwrite function in TypeScript's inheritance

Below is a class that I have: export class RestService { private baseUrl: string; constructor(protected http: HttpClient) { this.baseUrl = environment.LOCAL_URL; } public get<T>(resource: string, params?: HttpParams): Observable< ...

angulartypescriptoopinheritance

Creating dynamic checkboxes in Angular4 and binding them to an array of IDs

Hey there developers, I've been encountering an issue while trying to bind my dynamically generated checkboxes to an array in my project. In my users.template.html file, I have the following code snippet: <div *ngFor="let r of roles" class="checkb ...

angulartypescriptcheckbox

Is it possible for React props to include bespoke classes?

In our code, we have a TypeScript class that handles a variety of parameters including type, default/min/max values, and descriptions. This class is utilized in multiple parts of our application. As we switch to using React for our GUI development, one of ...

reactjstypescript