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

Question

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           product             Name   Laptop          Price  2000          Why is it adding a  product  in the beginning of the JSON  What can I do to fix this  My code   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 lt Product   gt            return this http get this productsUrl               map  response  Response    gt   lt Product   gt 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   gt  this product              error   gt  this errorMessage    lt any gt error             create-product html   lt div class  container  gt       lt h1 gt Create Product lt  h1 gt       lt form  ngSubmit   addProduct    gt           lt div class  form-group  gt               lt label for  name  gt Name lt  label gt               lt input type  text  class  form-control  required   ngModel    product Name  name  Name    name  ngModel  gt           lt  div gt           lt div class  form-group  gt               lt label for  Price  gt Price lt  label gt               lt input type  text  class  form-control  required   ngModel    product Price  name  Price  gt           lt  div gt           lt button type  submit  class  btn btn-default   click   addProduct  gt Add Product lt  button gt       lt  form gt   lt  div gt

User · Answer

If you are solely interested in outputting the JSON somewhere in your HTML, you could also use a pipe inside an interpolation. For example:

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

I am not entirely sure it works for every AngularJS version, but it works perfectly in my Ionic App (which uses Angular 2+).

User · Answer

Tested and working in Angular 9 0  If you re getting the data using API  array       ngOnInit        this service method    subscribe      data  gt          this array   JSON parse JSON stringify data object               You can use that array to print your results from API data in html template   Like   lt p gt   array  something     lt  p gt

User · Answer

Because you re encapsulating the product again  Try to convert it like so   let body   JSON stringify product

User · Answer

You ll have to parse again if you want it in actual JSON   JSON parse JSON stringify object

User · Answer

In your product service ts you are using stringify method in a wrong way    Just use   JSON stringify product     instead of   JSON stringify  product     i have checked your problem and after this it s working absolutely fine

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

Examples related to json

Examples related to post

Examples related to typescript

Examples related to angular