How do I iterate through this Firebase JSON? - json

Question

This is the JSON content I have uploaded in Firebase database.
Now I need to access this in my Angular 2 app.
I am getting undefined and NaN while trying to access the objects.
{
"clients" : {
"clients" : {
"-Kdl_wRRkn7nJxgz4B54" : {
"balance" : "100.00",
"email" : "jdoe#gmail.com",
"firstName" : "John",
"lastName" : "Doe",
"phone" : "555-555-5555"
},
"-KdleehAQm0HgVFYdkUo" : {
"balance" : "350.00",
"email" : "stevesmith#gmail.com",
"firstName" : "Steve",
"lastName" : "Smith",
"phone" : "444-444-4444"
}
}
}
}
I am trying to access this here
export class ClientsComponent implements OnInit {
clients:any[];
totalOwed:number;
constructor(
public clientService:ClientService
) { }
ngOnInit() {
this.clientService.getClients().subscribe(clients => {
this.clients = clients;
console.log(this.clients);
this.getTotalOwed();
});
}
getTotalOwed(){
let total = 0;
for(let i = 0;i < this.clients.length;i++){
console.log(this.clients[i]);
total += parseFloat(this.clients[i].balance);
}
this.totalOwed = total;
console.log(this.totalOwed);
}
}

Answer 1

First off, you should re-structure your JSON, the structure below will be better for looping through, and a better practice. second, the reason you are getting not a number is because you are not accessing the balance key's value.
your code to loop through the data structure below would look something like:
for(let i = 0; i < this.clients.length(); i++) {
console.log(this.clients[i].balance)
}
and the JSON:
{
"clients" : [
{
"id" : "-Kdl_wRRkn7nJxgz4B54",
"balance" : "100.00",
"email" : "jdoe#gmail.com",
"firstName" : "John",
"lastName" : "Doe",
"phone" : "555-555-5555"
},
{
"id" : "-KdleehAQm0HgVFYdkUo",
"balance" : "350.00",
"email" : "stevesmith#gmail.com",
"firstName" : "Steve",
"lastName" : "Smith",
"phone" : "444-444-4444"
}
]
}