2

I am trying to build a little website that shows all fields in a certain document. The problem is: the order of the fetched fields changes with each refresh. Is there a way to prevent that?

I fetch the data using:

const snapshot = await getDocs(collection(db, currentUser.uid))
console.log(snapshot[0].data())

^ I am using this getDocs()-system, because I need the other docs ids for another tasks in case you wonder

EDIT: Here is the structure of my database: enter image description here

In this case the snapshot[0].data() would sometimes be {field1 : "", field2 : ""} and sometimes be {field2: "", field1: ""}

Cyberguy Game
  • 355
  • 1
  • 8
  • Can you share what your database looks like? Also have you tried using [`orderBY()`](https://firebase.google.com/docs/firestore/query-data/order-limit-data) to order the documents based on a specific field? – Dharmaraj Jun 21 '22 at 12:43
  • @Dharmaraj how could I use the `orderBy()` function in this context? – Cyberguy Game Jun 21 '22 at 12:54
  • I just one document in this collection. On what basis are you trying to sort the collections? Can you log the response multiple times and show us what you mean by _"fetched data changes with each refresh."_? – Dharmaraj Jun 21 '22 at 12:56
  • @Dharmaraj I do not mean the order of the document, but the order of the fields. I edited the question. – Cyberguy Game Jun 21 '22 at 13:06
  • Have you checked https://stackoverflow.com/q/5525795/13130697 ? – Dharmaraj Jun 21 '22 at 13:45
  • @Dharmaraj Hm… according to that question and due to the fact, that I do not seem to have control over the type that is returned by the firebase function, I would thing the only way to ensure the right order would be another field that isn’t meant to be displayed and is an array with the order of the keys that should be displayed. – Cyberguy Game Jun 21 '22 at 15:15
  • Why does order of properties in the JSON object matter? – Dharmaraj Jun 21 '22 at 15:19
  • @Dharmaraj I want to .map through the Object.keys in order to display them. And it's annoying having them in another order after each refresh yk – Cyberguy Game Jun 21 '22 at 16:19
  • can you check this stackoverflow [link](https://stackoverflow.com/questions/70211123/guaranteed-order-of-fetched-data-from-firebase-realtime-database) once. – Sathi Aiswarya Jun 22 '22 at 08:10

1 Answers1

0

I don't think the root problem of this cause is related to Firebase's data method. Objects in JS do not have a specific order, and therefore the entries might be printed in different orders each time you refresh a page. In order for you to show the fields in the same order each time you fetch the data, you can either use a Map or an array.

If you just want to show each field of the document to the user, you can sort the entries of the object that is returned by the data() method on a document and store it in an array:

const snapshot = await getDocs(collection(db, currentUser.uid))
const unsortedData = snapshot.docs[0].data()
const sortedData = Object.entries(unsortedData).sort(([keyA], [keyB]) => keyA.localeCompare(keyB))

If you want to keep the sweet O(1) access time for objects and want to have the fields sorted, you can create a Map from the Array. Map stores its entries sorted based on the order they were added.

const snapshot = await getDocs(collection(db, currentUser.uid))
const unsortedData = snapshot.docs[0].data()
const sortedData = Object.entries(test).sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
const sortedMap = new Map(sortedData)

If you then want to render the Map again you could do:

Array.from(sortedMap).map(([key, value]) => { /* render the items here */ })
Jesper Paulsen
  • 311
  • 3
  • 8
  • ... The problem is that I do not want the object (that you seemingly cant order) ordered alphabetically, but ordered like in the question - based on which key comes first. Do you think it might be a good solution to just use an array with [key, value] pairs in firebase database? – Cyberguy Game Jun 21 '22 at 17:02
  • @CyberguyGame I don't think I completely understand what you want to achieve? If you want the same order as the Firestore console, you will have to do it alphabetically because that is what Firestore always shows in the UI. – Jesper Paulsen Jun 21 '22 at 18:28
  • Well... the problem is that you usually ask name, then surname and then the adress and so on. The problem is that I want to create a little form that allows to change this review data and change it. For that I need it ordered the way I originally asked for it in the form. And I am looking for a way to do that. – Cyberguy Game Jun 21 '22 at 21:54
  • So you want to create a page in react where you fetch the data from firestore and show what a user has input where you always know the keys of the object to show? Then you can hardcode the keys you want to display in react, and then access the value for each of those keys. For instance: `name: {data['name']}` – Jesper Paulsen Jun 22 '22 at 10:57