Map Json Angular Data 2

Asked

Viewed 531 times

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 me the object, but my doubt is on how to manipulate so that I can display your 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’m stuck on how to do this part. Thank you in advance

javascript json angular
  • 1

    console.log(this.planos); returns the json that of the question? why are you using .subscribe() instead of .then()?

  • @merchant yes, he returns the objects

  • I don’t know if I understand this correctly, but wouldn’t it just be taking the data and interpolating it into the view? On its component : ` record: any; ngOnInit() { const id = this.route.snapshot.paramMap.get('id'); this.itemSvc.getReg(id) . subscribe(data) => { this.record = data console.log('Category Found ' + JSON.stringify(data); }); } And then in the view {{ record.campo_que_vc_quer_display }} Sorry if I didn’t get it.

  • try to change planos: Object[] = []; for planos: any; If it works/doesn’t work, please let me know

1 answer

0


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

{{planos.id}}

Browser other questions tagged javascript json angular

You are not signed in. Login or sign up in order to post.