Reordering an array in AngularFire - what is the recommended way?

[em...@genesis.re]

I'm working on an educational app - each lesson contains some content.

Currently (early prototype version) I'm using the following key-value structure:

(some keys are automatically generated by Firebase, some of them were created by me)

I'm relying on property order but I know it's not ideal - http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order 

No, properties order in objects is not guaranteed in JavaScript; you need to use an Array

Later on I want other users to create new content and reorder it. I think that Array might be a more suitable structure to hold the data, I'm just a little bit unsure - how to allow reordering?

Docs about Synchronized Arrays: https://www.firebase.com/docs/web/libraries/angular/guide/synchronized-arrays.html

While the array isn't technically read-only, it has some special requirements for modifying the structure (removing and adding items) which we will cover below. Please read through this entire section before trying any slicing or dicing of the array.

 

Because of this special arrangement, AngularFire provides the concurrency safe $add(), $remove(), and $save() methods to modify the array and its elements.

 

Using methods like splice(), pop(), push(), shift(), and unshift() will probably work for modifying the local content, but those methods are not monitored by AngularFire and changes introduced won't affect the content or order on the remote server. Therefore, to change the remote data, the concurrency-safe methods should be used instead. 

API reference: https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray

Methods like splice(), push(), pop(), shift(), unshift(), and reverse() will cause the local data to become out of sync with the server. Instead, utilize the $add(), $remove(), and $save() methods provided by the service to change the structure of the array. 

More resources:

• https://www.firebase.com/blog/2014-04-28-best-practices-arrays-in-firebase.html
  
• https://www.firebase.com/blog/2014-05-06-synchronized-arrays.html
  

First thoughts how to solve this issue:

Each element of the array contains a sortKey - either a named field or setPriority()

As I'm reordering the array I can change the sortKey of the item I'm moving.

[
 { sortKey: "a"},
 { sortKey: "b"},
 { sortKey: "c"},
 { sortKey: "d"}
]

If I want to move "d" between "a" and "b" it should be possible to generate sortKey between "a" and "b" such as "az"

Second thoughts:

Don't bother with individual changes.

On save = complete array rewrite.

What is the recommended way?

Before I start changing my Firebase structure I want to ensure I'm doing it the right way...

Many thanks

Michal

[Kato Richardson]

Michal,

This is a classic XY problem. Is there a reason we can't just solve the ordering problem by adding a sort field and utilizing [orderByChild](https://www.firebase.com/docs/web/guide/retrieving-data.html#section-queries)?

Then users can reorder entries by simply editing the sort field accordingly.

☼, Kato

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/bb83b5c0-ca25-4138-b976-2321295033fd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Kato Richardson |

Developer Programs Eng |

kato...@google.com |

775-235-8398

[em...@genesis.re]

Hahaha...

Nice one, I've learnt something new! 

XY problem WOOP WOOP :)

Each lesson contains some content.

Later on I want other users to create new content and reorder it. 
I think that Array might be a more suitable structure to hold the data, 
I'm just a little bit unsure - how to allow reordering?

First thoughts how to solve this issue:

Each element of the array contains a sortKey - either a named field or setPriority() 

Answer:

Is there a reason we can't just solve the ordering problem by adding a sort field and utilizing [orderByChild](https://www.firebase.com/docs/web/guide/retrieving-data.html#section-queries)?

Not sure. For some reason I thought it is worthwhile to discuss various approaches - either storing as an array or as key-value pairs with the sort key. 

I think I was genuinely interested in ways how to reorder arrays. I described so background information to provide some context.

I think I just wanted to learn more about recommended way of doing things and learn more about the Firebase.

To answer your question - not sure. My first thoughts to add sortKey as the sort field were probably correct.

If I was really inquisitive I would ask a question - whether to use floats or strings? And when reordering data - shall I move a single element only (to insert between 14 and 15 create the sortKey equal to 14.5) or change the value of all the sortKeys? Would be nice to know what Firebase experts would do in this case...

Peace.

Michal

[Kato Richardson]

Well,

Generally, NoSQL data structures are heavily based on how you will read the information back later--this is part of what makes it massively scalable and fast. So, again, much here depends on the goal. Without understanding the end game (how the data will be read and presented), it's hard to suggest a good data structure and approach. 

Speaking generally, trying to create sortable keys is a lot of work, and arrays are generally not a great fit for distributed data, with some exceptions. But if you're just looking for some learning, here's a great discussion of NoSQL design patterns, it also has a compendium of links near the bottom that are just as enlightening.

☼, Kato

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/73ca464f-eca0-4eec-b0e9-9895a84a287f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.