Mapping Json Angular 2 data

0

I created a service to load a Json API:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';


@Injectable()
export class PlanosService {
  //get Json Servicos
    planos: Object[] = [];
    constructor(http: Http) {
      http
      .get('https://api.carguruclub.com/v1/servicos')
      .map(res => res.json())
      .subscribe(planos => {
        this.planos = planos;
        console.log(this.planos);
      }, erro => console.log(erro));
    }
}

In callback it returns the object to me, but my question is how to manipulate so that it can display its fields in my view. Example:

   {
    "products": [
        {
            "_id": "5886f570f0d1fb003caea75b",
            "id": "lavagem_padrao",
            "name": "Lavagem Padrão",
            "desc": "Lavagem completa",
            "recommendation": "Carguru recomenda a lavagem Padrão se você procura a melhor lavagem básica do mundo. Inclui calibragem dos pneus e o nosso famoso checklist."
        }
    ]
}

I wanted to display the name field of the Products object: {{products.name}} But I caught on how to do this part. Thanks in advance

    
asked by anonymous 18.07.2017 / 14:22

1 answer

0

As you are already assigning the value of subscribe to a variable in your typescript, you would just call it in your view

{{planos.id}}
    
02.10.2018 / 16:26