How do I fetch Firebase Object and set equal to local object? - angularjs

Question

I'm building an Ionic app with Angular that uses Firebase as the auth / database.
On my app, the user can create different things, or objects. I then take those objects and put them into an array. So I end up with an array of objects. The user can delete things in that local list, changes things, or add new things.
What I want is to be able to fetch the object (that I successfully store) in Firebase, and set it back as the object. I'm new to Firebase and it's api, so I'm a little stuck. Here's my code to retrieve the object from Firebase:
fetchList() {
const user = this.authService.getActiveUser();
if (user != null) {
return firebase.database().ref(user.uid + '/lists').once('value')
.then( snapshot => {
return snapshot.val();
})
.catch( err => {
return err;
});
}
}
I've read all over the Firebase docs and I cant figure out what snapshot.val() returns. Does it return an object or what. If it does, will I have to parse through the object to rebuild my local array of objects?
This is an example structure of some data in Firebase. 0 is the array index. I basically just pass in my array of objects and Firebase stores it like this. Now I want to retrieve it and set it equal to my local array of objects, so the user can have
+ Sidfnh450dfFHdh989490hdfh
- DFjghd904hgGHdhfs9845hfh0
- lists
- 0
hasProperty1: false
isProperty2: false
otherProperty: 'string stuff here'
title: 'List Title'
+ 1
+ 2
Or maybe I'm going about this all wrong. Maybe there exists a magical Firebase method that's similar to two-way data binding, whatever I change on the local object array mirrors Firebase, and vice versa. Any advice appreciated.
Edit
Additionally, something I'm doing locally is reordering the array. My app is a list of some kind, and users can reorder objects in the list. So if I did have a synchronized list with Firebase, and someone reordered some objects in the list, I'm not sure how I would reorder them in Firebase without deleting the entire object-array and writing a new one with the updated array indexes.

Answer 1

If you adjusted the way you stored the data in Firebase you could pull it out in a predefined order.
Notice the additional order key on your list.
+ Sidfnh450dfFHdh989490hdfh
- DFjghd904hgGHdhfs9845hfh0
- lists
- key1
hasProperty1: false
isProperty2: false
otherProperty: 'string stuff here'
title: 'List Title'
order: 1
+ keyn
// ...
order: 2
+ keyz
// ...
order: 3
Within your component you can request that the data comes out in order with a query on the list object.
When saving the new order you can pass the key such as key1, key2 and the new order to the saveOrder function.
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
#Component({
selector: 'app',
templateUrl: `
<ul *ngFor="let item of list | async">
<li>{{ item | json }}</li>
</ul>
`,
styleUrls: ['./app.scss']
})
export class AppComponent implements OnInit {
public list: FirebaseListObservable<any[]>;
constructor(
private db: AngularFireDatabase
) {}
ngOnInit() {
this.list = this.db.list('/DFjghd904hgGHdhfs9845hfh0/list', { query: { orderByChild: 'order' }});
}
saveOrder(key, newOrder) {
return this.list.update(key, { order: newOrder });
}
}