Using Angular 5+ to fetch information from an ASP.NET Core Web API

Having trouble retrieving data from an ASP.NET Core 2.0 Web API with Angular 5+.

The steps taken so far are as follows:

  1. An ASP.NET Core 2.0 Web API was created and deployed on a server. Data can be successfully retrieved using Postman or Swagger.
  2. Using NSwagStudio, TypeScript service classes were generated for the Angular frontend app.

The current issue: Although requests to the web API from the frontend app return the correct data in JSON format, there seems to be a problem during the mapping process to the poco object in the generated client service class. The resulting object has empty attributes.

Below is the code snippet:

product.service.ts
export class ProductService {
...

The methods from the Product-class are shown below:

init(data?: any) {
...

Upon inspecting data in the init() method, all necessary values are present. However, when trying to access specific values like data["ProductId"], they appear to be null/undefined.

Requesting assistance from anyone familiar with this issue.

Thank you

A screenshot of the console output displaying the data object can be viewed here: enter image description here

Answer №1

I've realized that I can simply cast the data object directly to Product:

  initialize(data?: any) {
    var p = <Product>data;

This approach works, but it makes me wonder why the generated class includes an init method that manually sets attributes when casting the object is possible.

Answer №2

NSwag configuration needs adjustment, consider utilizing DefaultPropertyNameHandling: CamelCase for ASP.NET Core

Alternatively, try the latest asp.net core api explorer powered swagger generator which intelligently identifies the contract resolver. (Experimental)

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

System CSS modules do not work correctly with Reactjs, CRA, TS, and Carco when using Less

Issues have arisen with the CSS module system in my project. Below are snippets from various code files and configurations: react-app-env.d.ts, craco.config.js, CircleButtonWithMessage.module.less, CircleButtonWithMessage.tsx, as described below: //react-a ...

What is the best way to arrange and manage assets?

I created a component with an image in it. The current file structure is like this: https://i.sstatic.net/hkZWG.png Now, my query is whether placing the assets folder inside the web folder is the right choice or not? UPDATE This is what I tried: impor ...

Utilizing Zend JSON encoding for seamless integration with JavaScript

I'm currently working with the Zend Framework. My objective is to pass JSON data from the controller to JavaScript. I have a simple array: $array = array('a' => 1, 'b' => 2); After encoding this array into JSON format: ...

Refresh the contents of the DataTable using ajax

I am currently using DataTables with AJAX to generate a table on page load. The initial part of my code is working correctly. However, I have encountered an issue when trying to filter users in the DataTable using a dropdown. After selecting a username a ...

When utilizing Angular 2, this message is triggered when a function is invoked from the Observable

One of my services is set up like this: @Injectable() export class DataService { constructor(protected url: string) { } private handleError(error: Response) { console.log(this.url); return Observable.throw(new AppError(error)); ...

Issue: Only one type can be named "Upload" within Apollo, Express, and Type-Graphql

I've encountered an issue while trying to execute a simple Mutation for uploading an image. The error I keep facing is: "Error: There can be only one type named 'Upload'." Here's the snippet of my code: import { FileUploadI, GraphQLUp ...

Encountering an Error When Trying to Read a JSON String: TypeError - string indices must be

I have been working on a program that involves reading a JSON string through a user interface and using it to perform various functions, such as breaking down mathematical equations. However, I am encountering an error message: "TypeError: string indice ...

Generate a JSON string that determines the precision of numbers using the key IOS OBJ C

In order to enhance the efficiency of uploading JSON data from an IOS app to the backend server, there is a need to optimize the size of the JSON encoded packet, which is currently approximately 5MB. However, most of this data consists of doubles with exce ...

What is the best way to remove an element from a JSON object using Python?

I am currently facing an issue with removing elements from _notes that have _type set to 1. I keep receiving an error message, but I am unsure of its meaning and how to resolve it. Can someone provide assistance? Below is the trimmed JSON: { "_no ...

Converting docx files to PDF in Angular 15 using the "docxjs" library: A step-by-step guide

I am currently utilizing the to generate some docx files and enable downloading, but I am faced with the challenge of converting these files into PDF format. This is my current process: public download(data: any): void { const documentCreator = new D ...

Optimal method for passing data from a function that utilizes a callback

My service involves calling a method with a callback: import {someDataBaseFunction} from 'something/somthing'; class MyService{ myServiceFunction(param1, param2){ someDataBaseFunction(param1, param2, (error) => { if ( ...

What is the correct method for importing React in TypeScript (.tsx) to ensure optimal integration?

Within our TSX/React web application, we employ two distinct import styles for the react module: import * as React from "react"; as well as import React from "react" As far as I know, both methods function without any noticeable differences. Is there a ...

Serializing objects into JSON format using a standard encoder

When it comes to JSON-serializing custom non-serializable objects, the traditional approach involves subclassing json.JSONEncoder and then supplying a custom encoder to json.dumps(). Typically, this process looks something like this: class CustomEncoder(j ...

Is it possible to retrieve 2 arguments within a function in a non-sequential manner?

Let's say there is a function with arguments A, B, C, D, and E. Function(A, B, C, D, E) However, not all arguments are needed all the time. For instance, only A and C are needed in some cases. Currently, I would have to call the function like this: Fu ...

Generating form groups programmaticallyORDynamically

I recently utilized angular-archwizard to implement a wizard step with *ngFor However, I encountered an issue on how to create a dynamic formGroup for each step. In the code below, I managed to create a single formGroup for all steps, but my goal is to ha ...

Building an array from scratch in Angular

Below is the URL to access the code: https://stackblitz.com/edit/ng-zorro-antd-start-xz4c93 Inquiring about creating a new array. For example, upon clicking the submit button, the desired output should resemble the following structure: "tasks": [ { ...

Transfer only designated attributes to object (TS/JS)

Is it feasible to create a custom copy function similar to Object.assign(...) that will only copy specific properties to the target? The code snippet I have is as follows: class A { foo?: string; constructor(p: any) { Object.assign(this, p ...

Obtain the precise Discriminated conditional unions type in the iterator function with Typescript

export type FILTER_META = | { type: 'string'; key: string; filters: { id: string; label?: string }[]; } | { type: 'time'; key: string; filters: { min: string; max: string }[]; } | { ...

Refresh PrimeNG dataTable without reloading the table

Currently, I am implementing the functionality of adding new rows to a dataTable in my template. Here is the code snippet from the component: rows: any = {} newrow: any = {} addNewRow(key: string) { let rows = {...this.rows} let newrow = {_key: Math ...

Tips on extracting status response codes from the backend and incorporating them into the frontend

I have a Node.js backend and an Angular frontend, and I need to send status response codes from the backend to display an error message "Email already exists" on the frontend. // Frontend add.user.component.ts if (this.AddUserForm.valid) { this. ...