I'm creating an Angular 2 simple CRUD application that allows me to CRUD products. I'm trying to implement the post method so I can create a product. My backend is an ASP.NET Web API. I'm having some trouble because when transforming my Product object to JSON it is not doing it correctly. The expected JSON should be like this:
{ "ID": 1, "Name": "Laptop", "Price": 2000 }
However, the JSON sent from my application is this:
{ "product":{ "Name":"Laptop", "Price":2000 } }
Why is it adding a "product" in the beginning of the JSON? What can I do to fix this? 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'; @Injectable() export class ProductService { private productsUrl = 'http://localhost:58875/api/products'; constructor(private http: Http) { } getProducts(): Observable<Product[]> { return this.http.get(this.productsUrl) .map((response: Response) => <Product[]>response.json()) .catch(this.handleError); } addProduct(product: Product) { let body = JSON.stringify({ product }); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.post(this.productsUrl, body, options) .map(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body.data || {}; } private handleError(error: Response) { console.error(error); return Observable.throw(error.json().error || 'Server Error'); } }
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' @Component({ moduleId: module.id, selector: 'app-create-product', templateUrl: 'create-product.html', styleUrls: ['create-product.css'], }) export class CreateProductComponent { product = new Product(undefined, '', undefined); errorMessage: string; constructor(private productService: ProductService) { } addProduct() { if (!this.product) { return; } this.productService.addProduct(this.product) .subscribe( product => this.product, error => this.errorMessage = <any>error); } }
create-product.html
<div class="container"> <h1>Create Product</h1> <form (ngSubmit)="addProduct()"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" required [(ngModel)]="product.Name" name="Name" #name="ngModel"> </div> <div class="form-group"> <label for="Price">Price</label> <input type="text" class="form-control" required [(ngModel)]="product.Price" name="Price"> </div> <button type="submit" class="btn btn-default" (click)="addProduct">Add Product</button> </form> </div>
Use the JSON. stringify() Method to Convert an Object Into a JSON String in TypeScript. In TypeScript, we will use the JSON. stringify() method to turn any object into a JSON string.
if you need to read or clone all of a model's data attributes, use its toJSON() method. This method returns a copy of the attributes as an object (not a JSON string despite its name). (When JSON.
Introduction to TypeScript JSON type. The TypeScript comes up with the functionality of working with JSON Type data. JSON being the JavaScript Object Notation, is used to make a data model that is easy to write and read. We can easily analyze large and complex data set with this TypeScript JSON type.
In your product.service.ts you are using stringify method in a wrong way..
Just use
JSON.stringify(product)
instead of
JSON.stringify({product})
i have checked your problem and after this it's working absolutely fine.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With