0

tenho um serviço rest q retorna macs provenientes de uma varredura,o modelo de json e este:

{
"macs": [
    {
        "mac": "9C:5C:F9:66:73:34"
    },
    {
        "mac": "B8:A3:E0:72:9E:EA"
    },
    {
        "mac": "00:E0:4C:2A:26:60"
    },
    {
        "mac": "00:E0:4C:76:0A:A7"
    },
    {
        "mac": "00:E0:4C:0D:C7:58"
    },
    {
        "mac": "00:E0:4C:79:7A:17"
    },
    {
        "mac": "00:E0:4C:07:72:D9"
    },
    {
        "mac": "00:E0:4C:60:97:77"
    }
  ]
}

Tenho os sequintes arquivos:

mac.component

export class MacComponent implements OnInit {
@Input() mac:Mac
constructor() { }

 ngOnInit() {
  }

 }

mac.model

export interface Mac{
mac:string
}

mac.service

@Injectable()
 export class MacService {

 constructor(private http: Http) { }

 getMacs():Observable<Mac[]>{
 return this.http.get('http://localhost:3000/macs')
 .map(response => response.json())

  }

 }

macs.component

export class MacsComponent implements OnInit {
macs:Mac[]
constructor(private service:MacService) { }

ngOnInit() {
    this.getMacs()
}
getMacs(){
    this.service.getMacs().subscribe(macs => this.macs = macs)
    console.log(this.macs);

}
printMacs(){
    console.log(this.macs);

}
} 

quando eu dou o print no 'macs' ele vem como undefined,eu preciso de um array de macs de retorno

1 Resposta 1

1

A chamada ao serviço está correta. Mas ela pode ter falhado e, por isto, você não teve um objeto de retorno. Olhe no console do navegador se a chamada foi bem sucedida, o erro por ser de CORS.

Além disso, o retorno da sua API não é um array, mas sim um objeto que possui um membro (macs) que é um array. Você precisa atualizar sua API para retornar diretamente um array ou atualizar a chamada da API, como abaixo:

@Injectable()
 export class MacService {

 constructor(private http: Http) { }

 getMacs():Observable<Mac[]>{

      return this.http.get('http://localhost:3000/macs')
       .map(response => response.json())
       .map(jsonRet => jsonRet.macs);

  }

 }

A sua chamada do console.log dentro do método getMacs(), sempre retornará null (se nunca for inicializada), porque ela deve ficar dentro do subscribe, já que a chamada é sempre assíncrona, veja:

getMacs(){
  this.service.getMacs().subscribe(macs => {

      this.macs = macs;
      console.log(this.macs);

    }, error => console.log('ocorreu um erro na chamada', error) 
  );

}

3
  • Tentei fazer isso e deu esse erro Property 'macs' does not exist on type 'Mac[],tentei ate mudar de interface a classe mas permaneceu o mesmo
    – Kai
    Commented 10/08/2017 às 19:10
  • Tenta razão, o Typscript vai dar erro mesmo. Isto, porque seu Observable é do tipo Observable<mac[]>. A minha sugestão foi pelo retorno da sua API, não tinha prestado muita atenção no retorno do observable. Vou atualizar minha resposta. Commented 10/08/2017 às 19:26
  • funcionou,muito obrigado!!
    – Kai
    Commented 10/08/2017 às 19:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .