web-dev-qa-db-fra.com

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

Je crée une application CRUD simple angulaire 2 qui me permet de créer des produits CRUD. J'essaie d'implémenter la méthode de publication pour pouvoir créer un produit. Mon backend est une API Web ASP.NET. J'ai quelques problèmes car lors de la transformation de mon objet Product en JSON, il ne le fait pas correctement. Le JSON attendu. Devrait ressembler à ceci:

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

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

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

Pourquoi ajoute-t-il un "produit" au 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
    ) { }   
}

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>
jsonposttypescriptangular
31
João Paiva

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

Juste utiliser 

JSON.stringify(product)

au lieu de 

JSON.stringify({product})

j'ai vérifié votre problème et après cela cela fonctionne parfaitement.

83
Akshay Rao

Vous devrez analyser à nouveau si vous le voulez en JSON réel:

JSON.parse(JSON.stringify(object))
14
Oded Breiner

Si vous souhaitez uniquement générer le code JSON quelque part dans votre code HTML, vous pouvez également utiliser un canal dans une interpolation. Par exemple:

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

Je ne suis pas tout à fait sûr que cela fonctionne pour toutes les versions d'AngularJS, mais cela fonctionne parfaitement dans mon application Ionic (qui utilise Angular 2+).

9
malvadao

Parce que vous encapsulez à nouveau le produit. Essayez de le convertir comme suit:

let body = JSON.stringify(product);
8
rinukkusu