Rearrange Firebase data on the client side

Having trouble sorting data in Firebase for a web project.

I tried using orderByChild to filter the data, but now I need to also order it by date. Here's what I've attempted:

  • Tried using object.values with .sort, no luck
  • Attempted to use lodash with _.orderBy, resulted in an empty array
  • Changed the syntax of both methods above, still unsuccessful
  • Successfully ordered different data not from Firebase using lodash orderBy

Any suggestions on how to achieve this?

Desired behavior:

Expected:

Code snippet being used:

var ref2 = firebase.database().ref(sessionToken+'/users/agendas/');
ref2.orderByChild('animalUid').equalTo(codigoAnimal).on("child_added", function(snapshot) {
  var dadosFiltrados = snapshot.val();
  var keys = snapshot.key;

  var appendAulas = $('#atendimentosTimeline');
  var tdLine = "";
  tdLine += '<div class="timeline__box"><div class="timeline__date"><span class="timeline__day"></span><span class="timeline__month">'+dadosFiltrados.hora+' - '+dadosFiltrados.end+'</span></div>';

  var ref3 = firebase.database().ref(sessionToken+'/users/atendimento/');
  ref3.orderByKey().equalTo(dadosFiltrados.idAtendimento).on("child_added", function(snapshot) {
  // firebase.database().ref(sessionToken+'/users/atendimento/'+dadosFiltrados.idAtendimento).once("value", function(info){
  var keyAtendimento = snapshot.key;
  var dadosAtendimento = snapshot.val();

Looking to sort the data in dadosFiltrados.

Answer №1

Solution:
When using OrderByChild in Firebase, the data is automatically sorted (). I decided to export the database as a .json file, make edits to the entries based on their key values (checking them before making changes), then save and import the updated data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual behavior of .replace() function observed in Chrome browser

<div> <input type="text" class="allownumericwithdecimal"/>saadad </div> $(".allownumericwithdecimal").live("keypress keyup ", function (event) { $(this).val($(this).val().replace(/[^0-9\.]/g, '')); var text = ...

JavaScript allows you to merge two attributes of an object together

I currently have an object array stored in JavaScript. Here's an example: objArr = [{"FirstName":"John","LastName":"Doe","Age":35},{"FirstName":"Jane","LastName":"Doe","Age":32}] My goal is to transform this object array into a new format like the f ...

What is the best way to ensure that two Node processes do not insert duplicate database records when running concurrently?

My Lambda function receives a high volume of events simultaneously, causing AWS to spin up multiple instances to handle the load. The function written in Node.js uses Knex to interact with a Postgres database, checking if a record with a specific ID exists ...

Update the dropdown field selection to the color #333 with the help of javascript

I am facing an issue with a dropdown field that has placeholder text and options to select. Initially, both the placeholder text and the options were in color #333. However, I managed to change the color of the placeholder text to light grey using the foll ...

The Controller is failing to pass JSON Data to the AJAX Call

When trying to access JSON data in the Controller, it is not being retrieved in the Success function and instead showing an error message "Failed to load resource: the server responded with a status of 406 (Not Acceptable)" or executing the Error function. ...

Is it possible for the like button to display specific information when clicked?

When working with a looping structure in Ionic and Angular, which includes post content such as text, photos, and videos, I am encountering an issue with selecting specific data when clicking on the like button. How can I ensure that only the data associat ...

ReactJS Components failing to load on initial site visit, only appearing after refreshing for the second time

var img; var dateFormat = require('dateformat'); var count; let arrayIMG = [] var storage = firebase.storage(); var storeRef = storage.ref('images/') const config = { ... }; if (!firebase.apps. ...

Client-Specific User Portal

Looking for some support on the back end of things. We are in the process of creating a portal where users will be directed to their specific landing pages upon logging in, providing access to files they have signed up for. Our team is exploring the use ...

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...

The specialized element encountered an issue with mapping

For a while now, I've been trying to create my own custom component but it's not working as expected. The interaction seems fine, but for some reason, it only renders the last item in the arrays. export default class MyComponent extends Comp ...

What is the best way to update information in a mongoose document using the _id field?

Although it may sound like a typical question, I've already conducted research and couldn't find a solution. I'm currently working on developing a discord bot and I don't have much experience in this area. The issue I keep encountering ...

Transforming a Processing (cursor) file into an interactive webpage

I have created a custom cursor using Processing and now I want to incorporate it into my website. Is there a way to convert the cursor into a .java file so that I can include it in my HTML file? ...

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...

Display a preview window once the image has been chosen

I have created an image preview div to show the selected image's thumbnail. Everything was working fine so far. But now, I want this div to be hidden when the page initially loads and only become visible when a user selects an image to upload. Here is ...

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

I have streamlined my linting setup by consolidating all configuration and related packages/plugins/presets (for prettier, stylelint, eslint, commitlint) into an npm package. This allows me to utilize the same setup across multiple projects, simply extendi ...

The error message "TypeError: body.stream(...).pipe is not a function" indicates that there is a problem with the

In our expressjs server, we have a scheduled job that runs every 10 minutes using the Gmail API to scan the inbox of a specific Gmail account for emails with a specific subject. When the criteria are met, the email messages and attachments need to be store ...

What could be causing the observable collection to display the correct number of objects, yet have them all appear empty?

I am offering the following service @Injectable() export class LMSVideoResulful { getVideos( enrolmentId : number ) :Observable<Array<Video>> { var x = new Array<Video>(); //https://www.youtube.com/embed/MV0vLcY65 ...

Having trouble setting up Strongloop for Loopback v.3 on macOS Catalina?

I'm currently in the process of understanding Loopback v3 (which is being utilized on a project site where I'm actively involved), and I'm attempting to follow the tutorials provided. One of the crucial steps involves installing Strongloop ...

Creating a stroke in SVG using JavaScript

I created a code that inserts a line into my svg page when I press a button Here is the html snippet: <body> <svg width="500" height="400"> </svg> <button id="btn1">Append text</button> </body> Below is the script us ...

When the key code is equal to "enter" (13), the form will be submitted

When I press the Enter key, I want to submit a form if there are no error messages present. Here is the function I have created: $(targetFormID).submit(function (e) { var errorMessage = getErrorMessage(targetDiv); if (e.keyCode == 13 && errorMessa ...