Comparing Firebase's child() method with Angularfire's $firebaseObject

I'm trying to figure out exactly when Firebase loads data to the client versus employing a "lazy load" approach (only downloading data when necessary). I have images saved in Firebase as base64 and there are two options:

  // Using standard Firebase
  var imagesRef = Ref.child('images');
  
  // Utilizing Angularfire
  var imagesObj = $firebaseObject(Ref.child('images'));

Ref is simply a reference to my Firebase URL.

In Angularfire, there is $loaded() which gives me the impression that all the data is loaded AT ONCE and becomes available immediately when you call $firebaseObject(). Is this accurate?

Regarding using child(), I haven't come across any load() event to monitor based on the documentation. But does it transfer all data from the server to the client?

If I have 500MB of images, I definitely want to avoid an all-at-once loading scenario.

Answer №1

When you utilize Firebase's .on method on a reference, it retrieves all the data at once.

It's important to note that Firebase does not automatically paginate the results for you, so it is recommended to use orderByFirst / Last or Firebase Util for pagination.

Angular Fire instantiates a firebaseObject / array by calling 'value' / 'child_added' within the constructor function, resulting in almost instantaneous data retrieval (with $loaded() function).

To see how this works, take a look at the source code of AngularFire's Object manager and the constructor of $firebaseObject.

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

What is the best way to ensure that a directive stays up to date with any changes made to the collection

After sending a directive a collection, I noticed that when I update the collection in the parent scope, the directive fails to update accordingly: http://jsfiddle.net/edwardtanguay/kj4oj1aa/9/ <div ng-controller="mainController"> <div item- ...

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

Selenium encountered an error when trying to execute the 'querySelector' function on the document. The selector provided, my_selector, is not recognized as a valid selector

Whenever I run this code: document.querySelector(my_selector) using selenium, an error is thrown: Failed to execute 'querySelector' on 'Document' my_selector is not a valid selector my_selector is definitely a valid selector that func ...

Strategies for Passing Select ID Using JavaScript/jQuery

Currently, I am working on resolving a problem that is detailed in my post here jQuery/js separating 2 drop down values. I am wondering how to properly pass #dropdown1 in the following code: <select id="dropdown1" multiple="multiple" class="multiselect ...

Automatically preselect the checkbox inputs with the API and update their status when they are interacted with

Hello fellow developer, I trust you are doing well. I am looking to have the checkboxes automatically checked based on data from the API and update their status when interacted with. I've tried different approaches but haven't found the right sol ...

Creating a new instance of Apigee.Client using JavaScript

Yesterday, I came across Apigee and decided to do some experimentation with it. Currently, I am following an installation guide to integrate it into JavaScript. The article mentions that I need to "pass a JSON object with the UUID or name for your App Serv ...

Automatically close the previously flipped card in Bootstrap 4

I have a card container with multiple cards inside. When I click on a card, it flips to show the back. However, I want the previously clicked card to close when I click on another card. My current code is not working as expected despite trying various Jque ...

Updating state in React with a nested promise within the useEffect hook

Trying to update the component state using React.useState with the help of useEffect. The reason behind using useEffect is that the API call response (EmployeeState > init()) determines what gets displayed on the UI. Component: import { EmployeeState } ...

Access the initial array and the primary element within an array containing multiple arrays

How can I access the first value in the first array of an array of arrays? questions: [ [ 'Purchase only', 'Sale and purchase', 'Sale only', 'Remortgage' ] ...

What is the best way to organize class usage within other classes to prevent circular dependencies?

The engine class presented below utilizes two renderer classes that extend a base renderer class: import {RendererOne} from "./renderer-one"; import {RendererTwo} from "./renderer-two"; export class Engine { coordinates: number; randomProperty: ...

The entire DOM in Angular2+ flickers upon loading a component using ngFor

I am facing an issue where, after a user clicks on an item to add it to a list and then renders the list using ngFor, there is a flickering effect on the screen/DOM. The strange thing is that this flicker only happens after adding the first item; subsequen ...

What is the solution for repairing the thin wireframe of a Three.js Cube?

The issue: The Three.js 3D cube I designed with a wireframe or outline mode looks fine on desktop and tablet devices, but when viewed on mobile, the wireframe becomes too thin to be practical. I need to maintain the same wireframe thickness for mobile as i ...

How to load filtered data into a custom ArrayList using Firebase in an Android app

Can anyone provide guidance on this issue: I am attempting to fetch filtered data from Firebase DB onCreate and populate a custom array with the retrieved data. Upon debugging, I have determined that the data is successfully fetched from the DB, but my cu ...

Issue with ng-submit not functioning properly within AngularJS form

I am a beginner with AngularJS and I am encountering an issue when trying to submit a simple form using ng-submit. The button is not working properly - it's unclickable and the cursor does not change when hovering over it. This problem seems to occur ...

Oops! Looks like the image property is undefined in React and causing a TypeError

Something seems to be going wrong with the Product.js file. This is where I am encountering an error related to finding the ID of the product that is being clicked on from data.js. The issue appears to be in the title section, and I'm struggling to fi ...

Create a div element that opens upon clicking the first checkbox with the help of AngularJS version 1.5.0

I am new to Angular and trying to learn. I created a list of checkboxes using ng-repeat, with five checkboxes in total. I want to open a specific div only when the first checkbox is clicked, but I'm not sure how to do this. Plunker https://i.sstatic ...

Is there a way to search for a specific item within a nested array?

I have 2 arrays within an array, each containing objects. How can I locate the object with the name "Sneijder"? const players = [ [ { id: 1, name: "Hagi", }, { id: 2, name: "Carlos", }, ], [ { id: 3 ...

Is it possible to direct to a webpage while retrieving a JSON object at the same

My login form code looks like this: <form action="urlLink/auth/signin" method="POST" class="signin form-horizontal" autocomplete="off"> <fieldset> <div class="form-group"> <!-- the email is expected as the user ...

Which JavaScript framework tackles the challenges of managing asynchronous flow, callbacks, and closures?

I have a strong aversion to JavaScript. I find it to be quite messy and disorganized as a language. However, I recognize that my lack of proficiency in coding with it may contribute to this perception. These past few days have been incredibly frustrating ...

Issue with Javascript form validation causing the form to still submit despite returning false

I am struggling to validate a form using JavaScript. The function is being called correctly and the alert is shown, but even after clicking ok on the alert, the form is still submitted. The function never returns false. I have come across this issue before ...