Come convertire correttamente un oggetto in JSON in Angular 2 con TypeScript

Question

Sto creando un'applicazione CRUD semplice Angular 2 che mi consente di utilizzare i prodotti CRUD. Sto cercando di implementare il metodo post in modo da poter creare un prodotto. Il mio back-end è un'API Web ASP.NET. Ho qualche problema perché quando trasformo il mio oggetto Product in JSON non lo fa correttamente. Il JSON atteso dovrebbe essere simile a questo:

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

Tuttavia, il JSON inviato dalla mia applicazione è questo:

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

Perché è l'aggiunta di un "prodotto" nel principio della JSON? Cosa posso fare per risolvere questo problema? Il mio codice:

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

creare-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); 
    } 
} 

creare-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

Nei tuoi product.service.ts si utilizza il metodo stringa i in un modo sbagliato ..

Basta usare

JSON.stringify(product) 

invece di

JSON.stringify({product}) 

Ho controllato il problema e dopo questo funziona perfettamente.

Answer 2

Perché stai incapsulando di nuovo il prodotto. Provate a convertirlo in questo modo:

let body = JSON.stringify(product); 

Answer 3

Dovrete analizzare di nuovo se si desidera che in JSON attuale:

JSON.parse(JSON.stringify(object)) 

Answer 4

Se sei interessato solo ad emettere il JSON da qualche parte nel codice HTML, si potrebbe anche usare un tubo all'interno di un interpolazione. Per esempio:

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

Non sono del tutto sicuro che funziona per ogni AngularJS, ma funziona perfettamente nel mio ionico App (che utilizza angolare 2).

Answer 5

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