0

I'm creating an angular2 application about mountains. I'm trying to retrieve and show some data from Firebase. The files I have are these (I've removed boilderplate code)

mountain-list.component.ts

import {Pipe, PipeTransform} from 'angular2/core';
import {MapToIterable} from "./mypipe-pipe";

@Component({
    selector: 'my-mountain-list',
    template: `
    <h1>ALL THE MOUNTAINS</h1>
        <button (click)="onGetMountain()">Get Mountains</button>
        <br>
        <ul>
            <li *ngFor="#item of mountains | MapToIterable" (click)="onSelect(item)">
                This is the key {{item.key}} and this is the value {{item.value}}<br>
            </li>
        </ul>
    `,
    pipes: [MapToIterable]
})

export class MountainListComponent implements OnInit {
    ngOnInit(): any {
        this.mountains = this._mountainService.getAllMountains();
    }
}

mypipe-pipe.ts

import {Pipe} from "angular2/core";
import {Mountain} from "./mountain";

@Pipe({
  name: 'MapToIterable'
})
export class MapToIterable {
  transform(dict: Mountain[]): any {
    var a = [];
    for (var key in dict) {
      if (dict.hasOwnProperty(key)) {
        a.push({ key: key, val: dict[key] });
      }
    }
    return a;
  }
}

mountain.service.ts

import {Injectable} from "angular2/core";
import {Http, Headers} from "angular2/http";
import 'rxjs/Rx';
import {Observable} from "rxjs/Observable";
import {Mountain} from "../protected/mountain/mountain";

@Injectable()
export class MountainDataService {
    constructor(private _http: Http) {}

    getAllMountains(): Observable<any> 
    {
        const token = localStorage.getItem('token') !== null ? '?auth=' + localStorage.getItem('token') : '';
        return this._http.get('https://xxxxx-xxxx-xxxx.firebaseio.com/users/data.json' + token)
            .map(response => response.json());

    }
}

Let me briefly explain these 3 files: mountain-list.component.ts has to show a list of all the mountains I have in Firebase, the mountain.service.ts which implements the getAllMountains() method which return all the mountains from Firebase, the mypipe-pipe.ts file. If I delete this file I get the error related to this question. With mypipe-pipe.ts the error diseppears but the for loop inside mountain-list.component.ts doesn't print the mountains, and here is the problem. Rather than the list of mountains I got this:

This is the key _isScalar and this is the value 
This is the key source and this is the value 
This is the key operator and this is the value

FYI: I'm sure that getAllMountains() retrieves the data from Firebase.

Community
  • 1
  • 1
splunk
  • 6,435
  • 17
  • 58
  • 105
  • What do you get if you log the response from _http.get? – TimK Mar 31 '16 at 19:53
  • @TimK http://postimg.org/image/hjez135m5/ – splunk Mar 31 '16 at 20:32
  • This article - [http://www.metaltoad.com/blog/angular-2-http-observables](http://www.metaltoad.com/blog/angular-2-http-observables) - mentions having to import 'rxjs/add/operator/map' to get the map() method on Observables. – TimK Mar 31 '16 at 21:11

0 Answers0