I am currently in the process of developing a simple CRUD application using Angular 2 that will allow me to manage products. The issue I am facing is with implementing the post method to create a new product. My backend is built on an ASP.NET Web API framework. The problem arises when I try to convert my Product object into JSON, as it does not format correctly. The ideal JSON structure should look like this:
{
"ID": 1,
"Name": "Laptop",
"Price": 2000
}
However, the JSON being sent from my application looks like this:
{
"product":{
"Name":"Laptop",
"Price":2000
}
}
Why is there an additional "product" wrapper at the beginning of the JSON output? How can I resolve this issue? Below are snippets of my code:
Product.ts
export class Product {
constructor(
public ID: number,
public Name: string,
public Price: number
) { }
}
Product.service.ts
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Product} from './product';
// Remaining code omitted for brevity
Create-product.component.ts
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Product } from '../product'
import { ProductService } from '../product.service'
// Remaining code omitted for brevity
Create-product.html
<div class="container">
<h1>Create Product</h1>
<form (ngSubmit)="addProduct()">
// Remaining HTML form elements and Angular bindings
</form>
</div>