Transforming the Server-side model to the Client-side model within Angular 4

My Server-side C# model

 public  class Instructor:Entity
 {
    public string Name { get; set; }
    public string PhoneNo { get; set; }
 }

Client-side TypeScript model

export class Instructor extends Entity {
    public name:string;
    public address:string;
    public phoneNo :string;
}

Client-side service

getDataById(id: string):Observable<T> {
    return this.repo.get(this.subUrl+'query',id).map( (res)=>{ return <T> res.json()})
}

Client-side controller

this.subscription= this.instructorService.getDataById(this.id).subscribe( (data:Instructor) =>{
       console.log(data);
       this.model.name=data.name;
       console.log(this.model))};

Output result: Result displayed in browser

Is there a more efficient way to perform this mapping?

this.model.name=data['Name'];

I prefer using this approach for the mapping or any other better suggestions

this.model.name=data.name;

Your assistance is greatly appreciated

Answer №1

Make sure to declare your teacher with a lower-case name. When you receive an object with an upper-case Name, TypeScript may complain that the data parameter does not have a Name member. In this case, consider declaring your data parameter as any instead of Teacher.

this.subscription= this.techerService.getDataById(this.id).subscribe((data:any) =>{
       console.log(data);
       this.model.name=data.Name;
       console.log(this.model);

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

Encountering a 500 error code while attempting to send a post request using Angular

Whenever I attempt to send a post request to Django server, I encounter a 500 (Internal Server Error) response. Interestingly, the get and put requests work flawlessly on the same server where Django is connected to PostgreSQL database. Here is a snippet ...

What are the steps to implement SignalR Stream in an ASP.NET Core Angular application?

Attempting to utilize SignalR stream for sending real-time data to clients and displaying it on an Angular component's template. Below is a snippet of my code, where this function is linked to a button (click) event in the template: getMessage(m ...

Getting News API and showcasing the information in Vuetify.js card components: A step-by-step guide

I'm trying to develop a news website by utilizing the News API for news data. I obtained an API Key from the official News API website, but my code is encountering some issues. The error message reads: TypeError: response.data.map is not a function ...

Is it impossible to use type as a generic in TypeScript?

Struggling with TypeScript in React and encountered an issue. I decided to use a generic to build an abstracted class related to Axios. However, I ran into an ESLint error when using any as the type parameter for my generic. ESLint: Unexpected any. Specif ...

When you want to place an image in the middle of a cell, you can easily achieve this by utilizing the addImage function

I am currently utilizing the addImage() method within the exceljs library to insert an image into a cell of an Excel file that is exported from my Angular application. While I have successfully added the image using the addImage() method, it appears in t ...

Having trouble with @typescript-eslint/member-ordering feature not functioning properly?

Ensuring a precise ordering in TypeScript classes is my goal, with a specific emphasis on enforcing alphabetical order within groups. To achieve this, I am refering to the following documentation: Shown below is the member-ordering configuration extracte ...

Incorporating New Relic into an Angular Universal application running on Node.js

I am in the process of integrating newrelic into my node.js application, which is built with angular universal and bundled using webpack. The first line in main.server.aot.ts reads: const newrelic = require('newrelic'); In addition, I have inc ...

Whenever I attempt to render a component passed as a prop, I encounter error TS2604

I am attempting to pass a component as a prop to another component in order to wrap the content of a material ui modal This is my attempt so far: import React, { Component } from 'react'; import withWidth, { isWidthDown } from '@material-u ...

Exploring Mixed Type Arrays Initialization in Typescript using Class-Transformer Library

In my class, I have a property member that is of type array. Each item in the array can be of various types such as MetaViewDatalinked or MetaViewContainer, as shown below class MetaViewContainer{ children: (MetaViewDatalinked | MetaViewContainer)[]; ...

Facing a 404 error when importing a 3rd party module into Angular 4+ due to the base tag

Currently, I am integrating Angular into my MVC application. To accomplish this, I have included a script tag in my layout view to reference the Angular source code, and so far everything is running smoothly. However, I encountered an obstacle when attemp ...

Displaying the count of items outside the Angular 2 ngFor loop

As a beginner in Angular, I've encountered a small issue. How can I display the actual number of items outside of an *ngFor loop? Currently, I'm using filter and pagination pipes in this manner: *ngFor="let item of items | filterBy: ['name ...

There was an issue with the specified entry-point "auth0/angular-jwt" as it is missing required dependencies

I am currently working on an Angular project with the following versions: @angular-devkit/architect 0.901.1 @angular-devkit/core 9.1.1 @angular-devkit/schematics 9.1.1 @schematics/angular 9.1.1 @schematics/update 0.901.1 rx ...

What are the steps for creating and deploying a project that utilizes asp.net core on the server-side and Angular on the client-side

My latest project combines asp.net core 5 and angular 15 technologies for the backend and frontend, respectively. The asp.net core MVC portion of the project is contained in a dedicated folder named serverApi, while the angular part is generated in another ...

Using Typescript, pass a Sequelize model as a property in NodeJS

Currently in the midst of a project using Node, Typescript, and Sequelize. I'm working on defining a generic controller that needs to have specific functionality: class Controller { Schema: <Sequelize-Model>; constructor(schema: <Sequel ...

Angular 4+ directive allowing interaction with the NgModel of a component

I'm looking to update styles based on the state of NgModel.control. To keep it DRY, I was thinking that a directive for reading the NgModel component state could be the solution. Is this actually feasible? I haven't been able to find any guidanc ...

Differences between Object and Typecasted Literal Object in TypeScript

I'm currently grappling with the decision of whether to use an interface or a class in my TypeScript code. Coming from a background in C#, I find the strictness of classes appealing, but there is also a certain allure to the flexibility offered by int ...

Error: The element 'mdb-icon' is not recognized and cannot be parsed

I am currently utilizing Angular 7 alongside Bootstrap 4, and encountering the following error message in my console. Uncaught Error: Template parse errors: 'mdb-icon' is not a known element: If 'mdb-icon' is an Angular co ...

FInding the inner value of a Vuetify chip

I have a Vue application that utilizes Vuetify chips to display information. I'm trying to log the value inside a specific chip when it is clicked, but I keep getting an undefined error when trying to access the array where the information comes from. ...

Verify the validity of an image URL

I am attempting to create a function in TypeScript that checks the validity of an image source URL. If the URL is valid, I want to display the image using React Native Image. If the URL is invalid, I would like to replace it with a local placeholder imag ...

What's the method for validating the spread operator in Typescript?

Is it possible to prevent this code from compiling? (since it currently does...) const bar: { a: string } = { a: '', ...{b: ''} } ...