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.