online - json.stringify angular 6

Cómo convertir un objeto a JSON correctamente en Angular 2 con TypeScript

Question

Estoy creando una aplicación CRUD simple Angular 2 que me permite los productos CRUD. Estoy tratando de implementar el método posterior para poder crear un producto. Mi backend es una API web ASP.NET. Estoy teniendo algunos problemas porque al transformar mi objeto Producto a JSON no lo está haciendo correctamente. El JSON esperado debería ser así:

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

Sin embargo, el JSON enviado desde mi aplicación es este:

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

¿Por qué está agregando un "producto" al comienzo de JSON? ¿Qué puedo hacer para arreglar esto? Mi código:

product.ts

export class Product {

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

producto.servicio.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);
    }
}

crear-producto.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

En su product.service.ts está utilizando el método de la cadena de una manera incorrecta ..

Solo usa

JSON.stringify(product) 

en lugar de

JSON.stringify({product})

He comprobado su problema y después de esto está funcionando absolutamente bien.

Answer 2

Porque estás encapsulando el producto de nuevo. Intenta convertirlo así:

let body = JSON.stringify(product); 

Answer 3

Si solo está interesado en generar el JSON en algún lugar de su HTML, también puede usar un conducto dentro de una interpolación. Por ejemplo:

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

No estoy completamente seguro de que funcione para todos los AngularJS, pero funciona perfectamente en mi aplicación iónica (que utiliza Angular 2).

Answer 4

Tendrá que volver a analizar si lo desea en JSON real:

JSON.parse(JSON.stringify(object))

Answer 5

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