CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
Tudor Alexandru
Tudor Alexandru

Reputation: 269

How to sort how you want the the data from firestore

I have a firestore with lessons, see the picture below, I get from the firestore the title property from each object and display it in the browser, but everytime I refresh the website the lessons are sorted by how they want, why is that happening? I want to sort them how I want, I want to start with 'Introduction' and so on, how can I do that? I think the orderBy() is not working here.

firestore order

As you see in the image above, the order in the firestore is alphabetical, but in my page is sorted by its own, see the picture below.

website worder

I want the result to be by in a specific order, for example we have the following titles, these titles are from the firestore: "Display", "Introduction", "Alignment", my problem is that these 3 titles are in a new order every time I refresh the website, I want them to be: "Introduction", "Alignment", "Display". In my case I have more titles but this is what's happening, I don't know how to align them how I want or even alphabetical if is possible.

Below is the code that I used to get the data from firestore:

useEffect(() => {
  
    db.collection("users")

      .doc(`${user.uid}`)
      .get()
      .then((doc) => {
        const allData = { ...doc.data(), id: doc.id };
        const intoArray = Object.entries(allData);
        intoArray.sort(); // I used sort here because I had the same problem 
                          // (every time a new order) with the 
                          // data when I converted it to an array

        const getCSSLessons = intoArray[0][1];
        const cssData = Object.values(getCSSLessons);
        setCss(cssData);

        const getHTMLLessons = intoArray[1][1];
        const htmlData = Object.values(getHTMLLessons);
        setHtml(htmlData);

        const getResLessons = intoArray[3][1];
        const resData = Object.values(getResLessons);
        setRes(resData);
      })
      .catch((error) => console.log(error));

  }, [user]);

I tried using sort(), for a variable (htmlData) but its not working. Also, I use map() to display them, if this helps you to answer to my question.

Upvotes: 0

Views: 80

Answers (2)

Tudor Alexandru
Tudor Alexandru

Reputation: 269

I was doing something unnecessary as you see in the first picture I had a main object css and in that object I had sub-objects like alignment and in the sub object I had the properties that I want to display, that sub object was unncessary, istead of sub objects with a pre defined name, I let the firebase to count the sub objects and add as a name a number and the order is the same as I wanted to be.

enter image description here

The code that I used to add data to firebase:


fire
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((cred) => {
        return db
          .collection("users")
          .doc(cred.user.uid) 
          .set({
            
           css: [
              {
                title: "Introduction",
                path: "/css3/introduction",
              },
              {
                title: "Priority",
                path: "/css3/priority",
              },
          
            ],

           });

Upvotes: 1

emi
emi

Reputation: 3078

If you use sort without any argument, it will sort array elements alphabetically. It looks like your array elements are arrays, which will end with unexpected behaviors. Use sort argument to ensure it uses your own sorting rules. For example:

const intoArray = Object
  .entries(allData)
  // I don't know what should be the sorting algorithm
  // As an example, I consider each element (`a` and `b`) to 
  // be arrays and compare both first element as a Number
  .sort( (a, b) => a[0] - b[0])

Edit

A more secure way to find elements in an array is to use find:

const getCSSLessons = intoArray[0]
  .find( element => element.name === 'CSS Lessons');

Upvotes: 2

Related Questions