Designing the Firebase Structure of an Angular Application

What is the best way to structure Firestore and Angular for efficient querying?

When using a JSON Cloud Firestore database, one of the challenges is inserting people and relating them to users.

To optimize query speed and efficiency, it is important to create nodes properly.

Storing all people in a single collection could lead to slow queries, so a more strategic approach is needed.

user1: // display people related to this user

personList:

2 people registered

[{'name': 'person 1'}, {'name': 'person 2'}]

user2: // display people related to this user

personList:

3 people registered

[{'name': 'another person 1'}, {'name': 'another person 2'}, {'name': 'another person 3'}]

When a user like user1 registers 10 people, the system should only show people related to user1.

angularjsangulartypescriptgoogle-cloud-firestore

Answer №1

When it comes to organizing your data, the approach you take depends on how you plan to query it. If your main focus is on displaying related individuals to a user, storing these connections in a personList sub-collection within each user document is a recommended strategy. However, if your goal is to find all users related to a specific person, utilizing Maps to create an index might be necessary.

For data synchronization across multiple users or individuals, I recommend exploring the following resources: Best practices for structuring related data in Firebase Firestore and managing updates and Efficient ways to query for matches between users in Cloud Firestore

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

Using the same ng-model to show distinct values in two separate input fields

I have a form with a dropdown list that loads data using the ng-model="placeid". When a user selects an option from the dropdown, I want to display the selected place's latitude (place.lat) in an input box. Here is the dropdown list code: <select ...

javascriptangularjs

Experiencing trouble accessing a property in TypeScript

While working on my Next.js project, I have encountered a specific issue related to selecting the Arabic language. The translation functions correctly and the text is successfully translated into Arabic. However, the layout does not switch from its default ...

reactjstypescriptnext.jslocalization

Issue with [rowHovered] directive in PrimeNG Table when cell-background is defined

I am working with a scrollable TreeTable where I have defined the rowHover attribute in the following manner: <p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeigh ...

htmlcssangularprimeng

Trouble detecting type definitions in Typescript typeRoots

I'm incorporating TypeScript into my project. When I attempt to bring in a package using commonJS const { v4: uuidv4 } = require('uuid'); No errors occur during compilation. However, when I transform it into an ES6 module like this: import ...

node.jstypescriptmicroservicesnode-modulestsconfig

I'm searching for the source code of Angular's `ViewContainerRef` - where can I locate it

I have been searching for the source code of Angular on GitHub, but I haven't been able to locate it. Could someone help me find it? view_container_ref only seems to provide the function name, but I am interested in understanding how the ViewContaine ...

angular

Explanation: Absence of CORS header 'Access-Control-Allow-Origin'

My code: header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST'); header("Access-Control-Allow-Headers: X-Requested-With"); The above snippet shows the headers I am using in my API contr ...

angularjsyii2

Having trouble with logging in/out, registration, and my submitPost function has suddenly ceased to work

Grunt is not showing any errors and when using the debugger "Error: [$injector:unpr] Unknown provider: AuthProvider <- Auth <- user <- NavCtrl also "Error: [$injector:unpr] Unknown provider: AuthProvider <- Auth <- user You can find the ...

angularjsfirebase

Incorporate the {{ }} syntax to implement the Function

Can a function, such as toLocaleLowerCase(), be used inside {{ }}? If not, is there an alternative method for achieving this? <div *ngFor="let item of elements| keyvalue :originalOrder" class="row mt-3"> <label class=" ...

htmlangulartypescriptfrontend

Unexpected Behavior in Angular ES6 Controller As Pattern

Forgive the uninspired title, as I am struggling to articulate my query. I have two nearly identical classes that are exhibiting slight variations in behavior. Additionally, there is a perplexing discrepancy where one class triggers a "this method can be s ...

angularjsecmascript-6static-methodsangularjs-controlleras

Dark Theme Issue with Angular Material's CheckBox in Mat-Menu

If you try to place a <mat-checkbox> inside a <mat-menu>, the dark themes won't apply to the text part of your <mat-checkbox>. Look at the image at the end for reference. A similar issue arises with <mat-label>s. However, the ...

angularcheckboxmenuangular-materialmenu-items

Is there a way to execute browser.get just once in a script?

I'm completely new to protractor, and I've been setting up the browser.get(URL) command within my first 'it' statement. Then, in my afterEach statement, I navigate back to the homepage. I'm curious if there is a more efficient pla ...

javascriptangularjsautomationjasmineprotractor

How to Guarantee NSwag & Extension Code is Positioned at the Beginning of the File

In my project, I am using an ASP.Net Core 3.1 backend and a Typescript 3.8 front end. I have been trying to configure NSwag to include authorization headers by following the guidelines provided in this documentation: https://github.com/RicoSuter/NSwag/wik ...

c#typescriptnswag

Problem with (click) event not triggering in innerHtml content in Angular 4

For some reason, my function isn't triggered when I click the <a... tag. Inside my component, I have the following code: public htmlstr: string; public idUser:number; this.idUser = 1; this.htmlstr = `<a (click)="delete(idUser)">${idUser}&l ...

htmlangulartypescript

Exploring Typescript: Enhancing the functionality of `export = Joi.Root`

I've noticed that the types for @hapi/joi appear to be outdated - some configuration parameters mentioned in the official documentation are missing from the types. To address this, I am attempting to enhance the existing types. node_modules/@types/ha ...

typescriptjoi

Creating an AngularJS service or factory that dynamically compiles HTML using a variable from the $scope

Looking to streamline a commonly used function in various controllers within an AngularJS project by creating a service/factory that can be accessed through $rootScope. The objective is to refactor the existing function: $scope.twitterRefresh = function(o ...

javascriptangularjsangularjs-scope

Angular filter within a nested ng-repeat loop

I've encountered an issue with nested filtering in Angular, where two filters are dependent on each other. What I'm trying to achieve is the following: <div ng-repeat="g in groups | filter:groupFilter"> ... <tr ng-repeat="c in g.co ...

javascriptangularjsfiltering

Operating on Javascript Objects with Randomized Keys

Once I retrieve my data from firebase, the result is an object containing multiple child objects. myObj = { "J251525" : { "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c3823212 ...

javascriptangulartypescript

What is the best approach for re-running controllers once the global data has been resolved?

Upon loading the application, I retrieve data within a run block... .run(function($rootScope, $q, teams, schools, news, games){ // Fetch all relevant data $rootScope.showSplash = true; $q.all([ $rootScope.school = schools.get({id:1}), $root ...

angularjsangularjs-scope

Mapping angular URLs with routes for the initial loading process

I recently encountered an issue with my Angular project that has multiple routes, such as /category/fruit/apple. When I try to access the full URL directly like http://myserver/category/fruit/apple, it returns a 404 error. This is because there is no confi ...

angularangular-router

What is the reason that the css backdrop-filter: blur() is functioning properly everywhere except on the active bootstrap-4 list-group-item?

I have a gallery with an album-card component inside, and within that is a carousel. I noticed that when I add a list-group and set one of the items as active, it remains unblurred. Can anyone help me understand why? Here is the HTML for the gallery com ...

htmlcssangularbootstrap-4sass