dispay json data in ngfor loop in angular (data from firebase) - json

Question

In my Angular code, I am getting data from a firebase database through an Http get request and when I try to display the result with an ngfor loop, I have an error message. This example was replicated from a tutorial and it worked for him. Where is the problem and how could I make it work? Thanks for helping!
I use a service to get data here is the code:
import {Http} from '#angular/http';
import { Injectable } from '#angular/core';
import {Response} from "#angular/http";
import {map} from 'rxjs/operators';
#Injectable()
export class ServerService {
constructor(private http:Http){}
StoreServers(servers:any[]){
return this.http.post('https://ng-http-a5718.firebaseio.com/data.json',servers);
}
GetServers(){
return this.http.get('https://ng-http-a5718.firebaseio.com/data.json').pipe(map(
(res:Response) =>{
const dataserver = res.json() as any[];
for(const server of dataserver ){
server.name='fetched_server'+server.name
}
return dataserver;
}
)
)
}
}
Here is the .ts code of the component where I try to display the data:
import { Component } from '#angular/core';
import { ServerService } from './server.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private ServerService : ServerService){}
servers = [
{
name: 'Testserver',
capacity: 10,
id: this.generateId()
},
{
name: 'Liveserver',
capacity: 100,
id: this.generateId()
}
];
onAddServer(name: string) {
this.servers.push({
name: name,
capacity: 50,
id: this.generateId()
});
}
private generateId() {
return Math.round(Math.random() * 10000);
}
OnSave(){
this.ServerService.StoreServers(this.servers).subscribe(
(Response)=>(console.log(Response)),
(Error)=>(console.log(Error))
)
}
OnGet(){
this.ServerService.GetServers().subscribe(
(data) => { this.servers=data}
,
(Error)=>{
return (console.log(Error));
}
)
}
}
Here is the html code of the component where I try to display the data:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<input type="text" #serverName>
<button class="btn btn-primary" (click)="onAddServer(serverName.value)">Add Server</button>
<hr>
<button class="btn btn-primary" (click)='OnSave()'>Save servers</button>
<button class="btn btn-primary" (click)='OnGet()'>Get servers</button>
<br>
<ul class="list-group" *ngFor="let server of servers">
<li class="list-group-item">{{ server.name }} (ID: {{ server.id }})</li>
</ul>
</div>
</div>
</div>
And finally here it is the error message I get:
enter image description here

Answer 1

this.server expecting Array in onGet() method but getting Object from firebase with the unique key. so you can modify onGet() method in following:
OnGet(){
this.ServerService.GetServers().subscribe(
(data) => {
const keys = Object.keys(data);
const firstKey = keys[0];
this.servers = data[firstKey]; // get the inside array
}
,
(Error)=>{
return (console.log(Error));
}
)
}