Comment convertir correctement un objet en JSON dans Angular 2 avec TypeScript

Question

Je suis de la création d'un rapporteur d'angle 2 simple CRUD application qui me permet de CRUD produits. Je suis en train de mettre en œuvre la méthode post donc je peux créer un produit. Mon backend est un ASP.NET l'API Web. Je vais avoir quelques difficultés parce que lors de la transformation de mon Produit objet en JSON, il n'est pas fait correctement. L' attendu JSON doit être comme ceci:

{
  "ID": 1,
  "Name": "Laptop",
  "Price": 2000
}

Cependant, le JSON envoyé à partir de mon application est ceci:

{  
   "product":{  
      "Name":"Laptop",
      "Price":2000
   }
}

Pourquoi est-il ajout d'un "produit" dans le début du JSON? Que puis-je faire pour résoudre ce problème? Mon code:

produit.ts

export class Product {

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

produit.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');
    }
}

de création de produit.composante.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>

Answer 1

Dans votre product.service.ts, vous utilisez la méthode stringify de manière incorrecte.

Utilisez simplement

 JSON.stringify(product) 
 

au lieu de

 JSON.stringify({product})
 

j'ai vérifié votre problème et après cela ça fonctionne très bien.

Answer 2

Vous aurez à analyser à nouveau si vous le voulez dans la réelle JSON:

JSON.parse(JSON.stringify(object))

Answer 3

Si vous êtes uniquement intéressé par la sortie du JSON quelque part dans votre code HTML, vous pouvez également utiliser un tuyau à l'intérieur d'une interpolation. Par exemple:

<p> {{ product | json }} </p>

Je ne suis pas entièrement sûr que ça marche pour tous les AngularJS version, mais il fonctionne parfaitement dans mon Ionique App (qui utilise Angulaire 2+).

Answer 4

Parce que vous êtes à l'encapsulation de nouveau le produit. Essaie de le convertir comme suit:

let body = JSON.stringify(product); 

Answer 5

let body = JSON.stringify(this.product);