Data object constructor is not triggered during JSON parsing

Currently, I am retrieving data from a server and then parsing it into TypeScript classes. To incorporate inheritance in my classes, each class must be capable of reporting its type. Let me explain the process:

Starting with the base class

import { PageElementType } from './page-element-type'

export class PageElement {
    pageElementType: PageElementType;
    constructor(aPageElementType: PageElementType) { 
        this.pageElementType = aPageElementType; 
    }
}

Moving on to a derived class

import { PageElement } from './page-element.model'
import { PageElementType } from './page-element-type'

export class Metadata extends PageElement {
    id: number;
    body: string;

    constructor(){
        super(PageElementType.metadata);
    }
}

Now, here's the service function I use to parse the data

getExam(){
    let exam = this.http.get('http://orangeberry.hopto.org/api/Exam/1')
    .map((response:Response) => <Exam>response.json())
    .do(data => console.log(data));
    return exam;
}

I seem to be receiving plain objects instead of the desired functional objects that adhere to the class definition. What would be the simplest and most direct approach to address this issue?

Answer №1

Using a cast in static code analysis is simply a suggestion and does not impact runtime execution.

If you want a value to be an instance of a specific class, you must manually create that instance like so:

.map((response:Response) => new Test(response.json()))

In this example, the constructor of the Test class extracts properties from the JSON data.

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

Electron does not have the capability to utilize Google's Speech to Text engine

I am trying to connect my microphone with the Google Speech to Text engine. I came across this page and copied the code into my renderer.ts file, uncommented the lines with const, but when I run it, I encounter an error at line 7 (const client = new speech ...

Tips for dragging and dropping a file attachment directly into your web browser

Google has recently introduced this feature to Gmail, and it doesn't need you to download any additional plugins. This feature is compatible with both Firefox and Chrome browsers, but unfortunately not with Internet Explorer. ...

How to securely retrieve a document by integrating Angular 2 with a web API

I am currently working on an Angular 4 and web API application where I am attempting to download a file using Web API and TypeScript Blob. The code below showcases how this process is executed. However, upon trying to open the downloaded image, I encounter ...

Data sent from Angular does not reach the C# controller it is intended for

I am currently facing an issue with my Angular component method that is intended to send data to a C# Controller. Despite successfully retrieving data from the controller to Angular, I encounter a problem when attempting to send data back to the controller ...

Having trouble getting Handsontable to scroll smoothly in Chrome?

I'm currently facing an issue with handsontable specifically on Chrome. The problem is that although the table itself is scrollable, the values and row headings within the table do not update as they should. You can see the issue illustrated in the im ...

Is it possible for a font to exclude the space character?

I'm currently developing a font detection library that must be extremely compact in size, perfect for direct inclusion on every page of a website. I've managed to shrink it down quite a bit already (compressed to 417 bytes). Take a look at it on ...

The benefits of exporting a component from one module and using it in another module

After putting in long hours trying to figure this out on my own, I've finally decided to seek help from the community. Thank you in advance for any assistance! I have a Web Projects Module that utilizes a Webpage Component. Within the Webprojects Mod ...

Can you provide instructions for generating a simple menu bar with options utilizing webgl/three.js?

I find the documentation for the three.js 3-D viewer difficult to understand as a beginner. I am curious about the fundamental steps involved in creating a menu bar or selector with options for a 3-D viewer using three.js / WebGL. Additionally, I am inter ...

Error Encountered: Visual Studio cannot locate the file 'COMPUTE_PATHS_ONLY.ts' during the build process

Upon fixing my visual studio 2015, an error was thrown that I haven't encountered before. Error Build: File 'COMPUTE_PATHS_ONLY.ts' not found. I did not add COMPUTE_PATHS_ONLY.ts to my Git repository. The other files in the repo rema ...

Tips for extracting basic JSON Array in an Android application

I've been trying to figure out how to parse a JSON Array in android. Here's an example of the json object I have: [{"ID":"1","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1a121e16133f121e161351121e16"> ...

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Discovery As I delved into the intricacies of web development, I stumbled upon a curious observation. In a particular MDN page, I noticed that the left and right sidebars had their scrollbars contained within themselves. However, the content block's ...

Identifying the presence of an image in a directory and displaying a standard image if not found

I have a directory containing pictures of different wines, each labeled with a specific code (e.g. FMP-HTR17). I would like to show the corresponding picture if it is available, but display a default image if the specific picture does not exist in the dire ...

Guide to incorporating external CSS and JavaScript into an Angular 2 project with Express.js and Node.js

As a newcomer to Angular2 and NodeJs, I am eager to learn how to integrate external CSS and JS in an Angular2 and Nodejs express app. Specifically, I am looking to integrate a bootstrap admin theme into my Nodejs application. The screenshots below provide ...

Running compiler-produced assembler code within the program

Recently, I came across an interesting presentation discussing inline ASM generation in Javascript optimization. The presentation can be found at the following link: . In another paper located here: https://sites.google.com/site/juliangamble/Home/Compiler ...

Can you explain how to utilize prop values for setting attributes in styled-components v4 with TypeScript?

Overview Situation: const Link = styled.a` border: solid 1px black; border-radius: 5px; padding: 5px; margin: 10px 5px; `; type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>; const LinkAsButton = styled(Link).attrs<ButtonP ...

Initiating Ajax to trigger the body's onLoad event

Whenever I use an ajax call to load a div, the entire page refreshes. It seems that the 'body onload=init()' event is triggered on ajax response causing all the initialization to repeat, which is not desired. Is there a way to only load the div t ...

Guide on How to Show Only the Initial Word of an H2 Header Using JavaScript or CSS

Is there a way to display only the first word from an h2 heading? For instance: In the website's source code, it would appear like this <h2> Stackoverflow is an Ideal Place</h2> But on the live website, it should be displayed like this ...

What steps should be taken in order to ensure the effectiveness of this keyword search

Currently, I am attempting to implement a keyword search feature for my meteor web app. Although the functionality is there, it's running quite slow. The way it works now is that when a user creates an article, they assign keywords to it. The keyS fun ...

Tips for Utilizing PHP Without the Need to Refresh the Page

Below are the contents of three files with their respective code: Controler.php <iframe id="frame1" style="display:none"></iframe> <iframe id="frame2" style="display:none"></iframe> <button onClick="document.getElementById(&apo ...

Issue with Vue.js - Double curly braces not rendering data on the page

I've recently delved into the world of vue.js Strangely enough, the double curly braces syntax doesn't seem to be rendering for me. However, when I utilize the v-text directive, everything falls into place. Here's a snippet of my code: HTM ...