João Paiva João Paiva - 1 year ago 158
JSON Question

How to convert an object to JSON correctly in Angular 2 with TypeScript

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:


Why is it adding a "product" in the beginning of the JSON? What can I do to fix this? My code:


export class Product {

public ID: number,
public Name: string,
public Price: number
) { }


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';

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())

addProduct(product: Product) {
let body = JSON.stringify({ product });
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return, body, options)

private extractData(res: Response) {
let body = res.json();
return || {};

private handleError(error: Response) {
return Observable.throw(error.json().error || 'Server Error');


import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { Product } from '../product'
import { ProductService } from '../product.service'

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; }
product => this.product,
error => this.errorMessage = <any>error);


<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 class="form-group">
<label for="Price">Price</label>
<input type="text" class="form-control" required [(ngModel)]="product.Price" name="Price">
<button type="submit" class="btn btn-default" (click)="addProduct">Add Product</button>

Answer Source

In your product.service.ts you are using stringify method in a wrong way..

Just use


instead of


i have checked your problem and after this it's working absolutely fine.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download