My Firebase database contains the following JSON data:
"help_text": [{
"Name": "Red Potion",
"Max Stack": 5,
"Potion Quantity": 1,
"Price": 10,
"Stackable": true
},
{
"Name": "Golden Key",
"Max Stack": 1,
"Price": 500,
"Rare Item": true,
"Stackable": false
},
{
"Name": "Silver Sword",
"Max Stack": 1,
"Price": 1000,
"Weapon Type": "Sword",
"Stackable": false
}
...and so on...
I am currently using Angular 4 to display the Name fields as headers and the individual items as list items:
app.help-screen component.html
<div class="help-item-box" *ngFor="let item of items | async">
<h2 class="help-item-title">{{item.Name}}</h2>
<ul class="help-item-properties">
<li *ngIf="item['Potion Quantity']">Potion Quantity: {{ item["Potion Quantity"] }}</li>
<li *ngIf="item.Price">Price: {{ item.Price }}</li>
<li *ngIf="item.Stackable">Stackable: {{ item.Stackable }}</li>
<li *ngIf="item['Quest Item']">Quest Item: {{ item["Quest Item"] }}</li>
<li *ngIf="item['Max Stack']">Max Stack: {{ item["Max Stack"] }}</li>
</ul>
</div>
app-help-screen.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@Component({
selector: 'app-help-screen',
templateUrl: './app-help-screen.component.html',
styleUrls: ['./app-help-screen.component.css']
})
export class HelpScreenComponent implements OnInit {
items: FirebaseListObservable<any[]>;
constructor(db: AngularFireDatabase) {
this.items = db.list('help_text');
console.log(this.items);
}
ngOnInit() {
}
}
Although this setup works, it is not very efficient as it requires rewriting code whenever a new property is added to an object. Ideally, I would like to exclude certain fields such as name, model name, and mesh placement value when outputting all other properties as list items. Is there a way to perform such a query using Firebase and Angularfire2?