Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro em FotoService.lista()

TypeError: res.json is not a function. Código (conforme demonstrado no video):

import { Http, Headers, Response } from '@angular/http';
import { FotoComponent } from './foto.component';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class FotoService {
    http: Http;
    headers: Headers;
    url: string = '/v1/fotos';

    constructor(http: Http) {
        this.http = http;
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
    }

    cadastra(foto: FotoComponent): Observable<Response> {
        return this.http
                   .post(this.url, JSON.stringify(foto), { headers: this.headers });
    }

    lista(): Observable<FotoComponent[]> {     
        return this.http
                   .get(this.url)
                   .map(res => res.json());
    }
}
4 respostas

Vamos descobrir a onde esta o erro...mas quando for postar a mensagem de erro, coloque um contexto. Inclusive se você for pedir ajuda em outros fóruns famosos da web, vão te pedir o contexto.

Coloque a mensagem completa de erro. Nada me diz com clareza se o erro é nesse arquivo. E também, quem esta usando FotoService, o código que chama.

solução!

De fato, o erro se origina em ListagemComponent:

import { Component, Input } from '@angular/core';
import { FotoService } from '../foto/foto.service';
import { FotoComponent } from '../foto/foto.component';

@Component({
    moduleId: module.id,
    selector: 'listagem',
    templateUrl: './listagem.component.html'
})
export class ListagemComponent {

    fotos: FotoComponent[] = [];

    constructor(service: FotoService) {     //definir o tipo no construtor implicitamente chama @Inject(tipo)
        service
            .lista()
            .map(res => res.json())
            .subscribe(fotos => {
                this.fotos = fotos;
                console.log(this.fotos);
            }, err => console.log(err));
    }
}

Na linha que contém

  .map(res => res.json())

O VSCode mostra

[ts] Property 'json' does not exist on type 'FotoComponent[]'.

E o log completo:

TypeError: res.json is not a function
    at MapSubscriber.eval [as project] (http://localhost:3000/app/listagem/listagem.component.js:19:46)
    at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/operator/map.js:77:35)
    at MapSubscriber.Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18)
    at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/operator/map.js:83:26)
    at MapSubscriber.Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18)
    at XMLHttpRequest.onLoad (http://localhost:3000/node_modules/@angular/http/bundles/http.umd.js:1497:42)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
    at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6233:41)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:224:42)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)

Mas pode deixar, que identifiquei o problema; na verdade, ocorreu depois que implementei o lista() em FotoService:

lista(): Observable<FotoComponent[]> {     //Observable possui o metodo subscribe() -- é o equivalente no Angular2 às Promises
        return this.http
                   .get(this.url)
                   .map(res => res.json());
    }

Ou seja, ListagemComponent não deveria nem ter a chamada

  .map(res => res.json())

Perdo-me pelo erro bobo e pergunta pior ainda. Tenho bastante experiência com desenvolvimento (em outras linguagens, que não JavaScript), sei da necessidade de explicitar contexto, obviamente, mas caí na armadilha de fazer a pergunta "in a hurry", pois estava em cima da hora de sair para um compromisso. És um ótimo professor, só tenho a agradecer a paciência com este dinossauro da TI que tenta aprender esses frameworks modernosos JavaScript que tendem a se multiplicar ad infinitum :-)

Odilon, tenho acompanhado-o em outros cursos como o de ES6. Aliás, você tem uma perspicácia em analisar o código, inclusive apontar quando há algo de errado ou quando o instrutor esqueceu algo. É uma qualidade de se aplaudir. Aliás, fiz a correção do vídeo do ES6 que falta a instrução que gerou dúvida.

E não há o que se desculpar. Eu pedi o contexto porque ele me ajudaria a descobrir o problema. Eu já desconfiava que o problema era em quem chamava o método lista.

Aliás, estamos no mesmo barco, sou um dinossauro assim como você. Mas como não estamos fossilizados, nosso lado "dinossauro" se torna vantagem competitiva!

Feliz 2017 e espero encontra-lo em outros cursos (aguarde que 2017 tem novidades).

Flávio Almeida