Retrieving data from firebase database through loop

I have JSON Format like below

[
	{
		"january" : {
			"food" : {
				"actual_budget" : "2000",
				"spent" : "1500"
			},
			"cloths" : {
				"actual_budget" : "4000",
				"spent" : "2500"
			},
			"medicine" : {
				"actual_budget" : "5000",
				"spent" : "500"
			}
		},
		"februrary" : {
			"food" : {
				"actual_budget" : "2000",
				"spent" : "1500"
			},
			"cloths" : {
				"actual_budget" : "4000",
				"spent" : "2500"
			},
			"medicine" : {
				"actual_budget" : "5000",
				"spent" : "500"
			}
		}
	}
]

And in home.ts


monthWiseBudget:FirebaseListObservable<any>;

  constructor(public navCtrl: NavController, public navParams: NavParams, public angFire: AngularFireDatabase) {
    this.monthWiseBudget = this.angFire.list('/');
  }

And in home.html

<ion-card class="month-card">
    <ion-card-header>
     Need Month name
    </ion-card-header>
  </ion-card>
<ion-row *ngFor="let month of monthWiseBudget | async">
          <ion-col col-6>Item</ion-col>
          <ion-col col-3>{{month.january.food.actual_budget}}</ion-col>
        </ion-row>

I need to loop based on number of categories available like food, medicine etc…
And need to display month name in for those displayed details.

Thanks in advance.

That doesn’t look like a format that scales. I suggest you read the Firebase docs on keeping your data flat.

I gone through but i didn’t get clearly as their examples are very few. I am completely new to this. So if someone helps for first time then i will catch it. Still i am going through few

The basic issue is that if you’re looping through a structure 2 levels deep, you’re exposing yourself to a problem. You can end up having to load something huge in order to get at one data point. Take a look at how they suggest storing chat messages, to keep the storage flat. Your budget categories are like the chat messages.

I gone through few videos and tutorials… But not getting how to improve my database structure and how to retrieve those. If you guide me it will be helpful to go to next task

I think he’s referring to “flattening” your data. For example, you could remove a layer by using

January: {
"food_budget": "2000",
"food_spent": "1500",
"clothes_budget": "4000",
"clothes_spent": "2500"
}

Or, probably better…

food_budget: {
"January": "2000",
"February": "3000",
"March": "1750"
}
food_spent: {
"January": "1500",
"February": "1000",
"March": "1250"
}

Something along those lines

Don’t do this. There’s a lot of third-tier information out there. It’s not surprising you didn’t get anywhere. Start with the official docs, and go deep into them. The docs are good for both Firebase and Angular. (Ionic is only about B+ level I’d say, but that’s a different issue.)

This link was the first hit when I typed “Firebase flatten data” into Google just now. This is what you want.
https://firebase.google.com/docs/database/web/structure-data#flatten_data_structures

1 Like

I structured database can you please review it

Please check this