0

I've done this before but this time I can't get this to work.

My problem is that my component is not recieving any object (and that's weird enough because I can print variables).

This is my service:

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

@Injectable()
export class InfoService {

  listCameras: any[] = [];

  constructor(private http: Http) { }

  getCameras() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:3000/info/detalleCamaras', { headers: headers })
      .map(res => {
        this.listCameras = res.json();
        console.log(this.listCameras);
        return this.listCameras;
      });
  }


}

The output in the console log is fine

Now, when I go to /detalleCamaras component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Http, HttpModule, Response } from '@angular/http';
import { Headers } from '@angular/http';
import { InfoService } from './../../services/info.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-cameras',
  templateUrl: './detalle-cameras.component.html',
  styles: []
})
export class DetalleCamerasComponent implements OnInit {

  listCameras: any[] = [];

  constructor(private _http: Http,
    private _info: InfoService) {  }

  ngOnInit() {
    this._info.getCameras().subscribe(data => this.listCameras = data);
    console.log(this.listCameras);
  }

}

The output is empty but I can get to print a list into a table because of my service. But what I want to do is consume the JSON from my service.

What I'm doing wrong?

Edit:

Component.html 

<table class="table table-hover">
  <tbody>
    <tr *ngFor="let camera of listCameras; let i = index">
      <td scope="row">
        {{camera.camera}}
      </td>
      <td>
        {{camera.date}}
      </td>
      <td>N of Cameras</td>
      <td>
        <i class="fa fa-check icon-status-ok" aria-hidden="true"></i>
      </td>
    </tr>
  </tbody>
</table>
  • Looks like you are getting the data correctly. The `console.log(this.listCameras)` is empty in your component because you are calling the console log before the data is returned. Can you post your component.html? It might not be using `listCameras` correctly – LLai Nov 20 '17 at 02:16
  • @LLai post updated with the html. That is working just fine –  Nov 20 '17 at 02:20
  • do you see any errors on console? – Sajeetharan Nov 20 '17 at 02:22
  • @Nico im confused. what is the problem then? the console.log in your component? – LLai Nov 20 '17 at 02:24
  • @LLai as weird as it seems: yes. I need to recieve an object because now I'm trying to pass a param to the next view. That list links to a specific camera model. –  Nov 20 '17 at 02:26
  • @Nico any logic you need to do after you receive the listCameras should be done in the next callback of the subscribe method. `.subscribe(res => {this.listCamers = data; // any other logic });` – LLai Nov 20 '17 at 02:32

0 Answers0