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

Is there a way to reduce the version of npm in a nodejs project?

Despite many attempts made by others, I am still struggling to resolve this issue. I have experimented with the following: npm uninstall -g npm@<version> npm uninstall npm --save npm uninstall -g npm --save However, all my efforts have been unsuc ...

Tips for uploading a file and submitting form data with Angular2, using [(ngModel)], and then storing the reference in MongoDB

Currently, I am working on a task page and I need to implement the functionality to upload a file along with the form submission to the NodeJs express server. @Component({ selector: 'tasks', template: `<div mdl class="mdl-grid demo-c ...

tsconfig is overlooking the specified "paths" in my Vue project configuration

Despite seeing this issue multiple times, I am facing a problem with my "paths" object not working as expected. Originally, it was set up like this: "paths": { "@/*": ["src/*"] }, I made updates to it and now it looks like ...

What is the best way to define a union type that encompasses all values within a field of an array?

I have a function that takes an array and a field parameter, but I want to restrict the field's type to a union type that describes all the values of the fields in the array. Here's an example: interface item { name: string, value: number ...

The API response contains a date format that is not recognized

When the API Server sends a response with the token expiration date, it is in this specific format: 2022-05-09T02:11:27.747 Can you identify the format of this date? ...

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

Angular 7 router navigate encountering a matching issue

I created a router module with the following configuration: RouterModule.forRoot([ {path: 'general', component: MapComponent}, {path: 'general/:id', component: MapComponent}, {path: '', component: LoginComponent} ]) Sub ...

"Transforming JSON data into a format compatible with Highcharts in PHP: A step-by-step

Currently facing an issue with converting the given array format into a Highcharts compatible JSON to create a line chart. Although everything else is functioning correctly, I am struggling with this specific conversion task. { name: [ 1000, ...

What in the world is going on with this Typescript Mapped type without a right-hand side?

I encountered a situation where my React component had numerous methods for toggling boolean state properties. Since these functions all did the same thing, I wanted to streamline the process by creating a common function for toggling properties. Each met ...

The convergence of Phoenix, Json, and Unix Timestamps

Currently, I am in the process of exporting data from SQL Server in json format to be able to import it into my Phoenix app. One aspect that I'm uncertain about is how to handle dates. As of now, I am exporting dates as Unix timestamps. Below is an ex ...

Obtain the query parameter before undergoing redirection within Angular version 14

In my Angular application, I am facing a challenge where I need to display a specific message to the user once they click on a link that has been sent to them via email. The link is intended to open a page within the app at the URL: "localhost:8080/?d ...

What is the best way to transform an escaped JSON-string into an NSString?

Currently, I am dealing with an HTTP server that returns a JSON string in the response body: "Some text.\nSome text.\n\t\"Some text in quotes.\"" My task is to remove the quotes at the beginning and end of the string, as well as ...

Error encountered: Unable to render template at an unidentified path in a NODE JS environment

I am currently working on a HTML page with the help of node js. This is the code I have written for running app.js: app.get('/',function(req,res)){ res.render('index',{"data":["name" , "ABC"] }); }); In order to display the na ...

Tips for obtaining the rotation angle within the Ionic gesture API?

Currently, I am working on canvas and facing an issue while handling gesture events with Hammer.js. Despite seeking help in various forums, including this one, I have yet to receive a response. Now, I am trying my luck with Ionic gestures but struggling to ...

Managing JSON object with irregular data in Angular 7: Best Practices

When the service returns data in a specific format, I am able to view the data in the developer tools. {"results":{"BindGridDatatable":[{"ID":"0005","Name":"Rohit"}, {"ID":"0006","Name":"Rahul"}], "Totalvalue":119}} ...

Prevent selecting dates beyond the current date in Formly Datepicker within Angular

How can I disable future dates in Formly with Material datepicker in Angular? Despite searching online, I am unable to find a solution! export class AppComponent { form = new FormGroup({}); model: any = {}; options: FormlyFormOptions = {}; fields: ...

Using PHP to generate JSON output

Currently, the JSON output I am receiving looks like this: [ { "ID": 1479, "Name": "praven", "Number": "007", "Image": "" } ] The PHP code I am using to generate this output is as follows: <?php require_onc ...

Retrieving a variable value from an AJAX call for external use

Looking for a solution to pass the generated JSON response from an ASMX web service accessed via AJAX to an outside variable in another function. Below is the code snippet for reference: function setJsonSer() { var strWsUrl = &apo ...

The element type 'x' in JSX does not offer any construct or call signatures

I have recently imported an image and I am trying to use it within a function. The imported image is as follows: import Edit from 'src/assets/setting/advertising/edit.png'; This is the function in question: function getOptions(row) { ...

Steps to access the parent node key in Realtime Firebase Database

When data is pushed into the RealTime Firebase Database, it gets structured in JSON format. However, if there is a JSONObject within another JSONObject in the RealTime Database, how can we retrieve the "key" name of that inner JSONObject? The image below ...