Tips for organizing information retrieved from Cloud Firestore

I have implemented a service to retrieve data from my firestore collection and now I am looking to organize the documents based on a specific field such as "date". Below are the relevant codes:

BARCODE.SERVICE.TS

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { Barcode } from '../models/barcode';
@Injectable({
  providedIn: 'root'
})
export class BarcodeService {
  barcodesCollection: AngularFirestoreCollection<Barcode>;
  barcodes: Observable<Barcode[]>;
  constructor(public afs: AngularFirestore) { 
    this.barcodesCollection = this.afs.collection('barcodes');

    this.barcodes = this.barcodesCollection.valueChanges();
  }
  getBarcodes(){
    this.barcodes = this.afs.collection('barcodes').valueChanges();
    return this.barcodes;
  }

  addBarcode(barcode: Barcode) {
    this.barcodesCollection.add(barcode);
  }
}

COMPONENT.TS (only showing necessary part)

ngOnInit() {
    this.barcodeService.getBarcodes().subscribe(barcodes => {
      this.barcodes = barcodes;
    });
  }

COMPONENT.HTML

<div *ngIf="barcodes.length > 0;else noBarcodes">
        <div *ngFor="let barcode of barcodes">
            <a (click)="viewdet(barcode.id)"><table >
                    <tr>
                        <td><h3 class="big"><b>{{barcode.vendor}}</b></h3></td>
                        <td rowspan="3"><span>&#8250;</span></td>
                    </tr>
                    <tr>
                        <td><h3><b>Reel No:</b> {{barcode.reelno}}</h3></td>
                    </tr>
                    <tr>
                        <td><h3><b>Date:</b> {{barcode.date}}</h3></td>
                    </tr>


            </table></a>
        </div>
    </div>

Answer №1

The instructions outlined in the documentation suggest that the code snippet below should function correctly (although it has not been tested yet):

  fetchBarcodes(){
    this.barcodesList = this.afs.collection('barcodes', ref => ref.orderBy('date')).valueChanges();
    return this.barcodesList;
  }

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 could be triggering the "slice is not defined" error in this TypeScript and Vue 3 application?

I have been developing a Single Page Application using Vue 3, TypeScript, and the The Movie Database (TMDB) API. In my src\components\MovieDetails.vue file, I have implemented the following: <template> <div class="row"> ...

TSLint Alert: Excessive white space detected before 'from' keyword (import-spacing)

I'm currently using WebStorm and working to maintain a specific code style: https://i.sstatic.net/r1n7n.png However, I encounter an issue where TSLint highlights my spacing and provides the following hint: "Too many spaces before 'from' ...

Exclude Cancel button solely from pFileUpload

While using pFileUpload, I am able to see all three buttons, however, I do not require the Cancel button. Even though the documentation mentions an attribute called showCancelButton, applying it does not result in any changes. <p-fileUpload name="demo ...

Determine the appropriate generic type based on a sub class

I'm currently working on deducing the type of an attribute within a generic class. For instance: abstract class A<T> { attr: T; } class B extends A<number> { attr = 1; } type Custom = { value: string; }; class C extends A<Custo ...

What could be the reason for my provider loading the data twice?

Recently, I have been following a tutorial on building an Ionic app that displays information about National Parks. The data is stored locally and loaded by a Provider in my application. However, I noticed that the data is being loaded twice by the Provide ...

Utilize the class designation to label interface attributes

Here is a link to a great TypeScript Playground that demonstrates what I am trying to accomplish: TS Playground. The goal is to use the variable Class.name to name the properties in my code. class MyClass { readonly a: {b: number} = { b: 123 }; const ...

Tips for managing open and closed components within a React accordion and ensuring only the clicked component is opened

Unique Accordion component: const CustomAccordion = (props: AccordionProps) => { const { label, levels, activeId, id } = props const [isExpand, setIsExpand] = useState(false) const onPress = useEvent(() => { setIsExpand( ...

Angular 2 observables failing to store returned object in designated variable

fetchEmployee(id : number) : void{ var employeeData : Employee; this.http.get(this.employeesUrl + '/' + id) .map(response => <Employee>response.json()) .subscribe((res) =>{employeeData = res}, ...

Executing React's useEffect hook twice

As I work on developing an API using express.js, I have implemented an authentication system utilizing JWT tokens for generating refresh and access tokens. During testing with Jest, Supertest, and Postman, everything appears to be functioning correctly. O ...

Develop a versatile post/put/get request in TypeScript for React applications

I am currently working on enhancing my generic writing skills. I have implemented POST/PUT/DELETE/GET for attachments along with various entity types (with more to be added in the future). The existing code functions correctly and is more generic compared ...

picker elementClass()

I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass: dateClass() { return (date: Date): MatCalendarCellCssClasses => { const unvailableArray = this.shareDate.unavailableDates; ...

Is there a way to convert a JavaScript object to a class while eliminating unnecessary properties?

In my current project, I am using Typescript with ExpressJS to build APIs. Let's say I have a typescript User model defined as follows: class UserModel { id: number; email: string; password: string; name: string; dob: Date; ge ...

deliver a precise observable

Recently, I spent hours following a tutorial on jwt refresh tokens, only to discover that the code was outdated and some changes were required. As a result, I created an interceptor which encountered an issue with the Observable component, leaving me unsur ...

Struggling to effectively work with ArrayForm when trying to include additional form fields

I'm attempting to add a playlist in Mat-dialog that contains songs in a list using (formArray) as shown here: https://i.stack.imgur.com/diWnm.png However, I am unsure of the mistake I might be making This is how my dialogue appears: https://i.stac ...

What is the best way to refer to a specific argument by implication within a function type?

Is there a way to extract the name of an argument from one type and use it in another type? For example, is it possible to achieve something like this: type F_v1 = (name: number) => boolean; type A = ["name", number]; //type F_v2 = (A[0]: A[1]) => bo ...

Issue encountered while loading ng2-bootstrap

Encountering an issue with importing ng2-bootstrap. Here is the error message: http://localhost:3002/ng2-bootstrap/ng2-bootstrap.js 404 (Not Found) Error: Error: XHR error (404 Not Found) loading http://localhost:3002/ng2-bootstrap/ng2-bootstrap.js at ...

Is it possible to have different property types within the same TypeScript class?

I'm currently working with TypeScript and Angular. I have two services that are quite similar, but they have different properties: synchronizedMaps: Map<string, Map<string, MapSynchSettings>> = new Map<string, Map<string, MapSync ...

Encountering Typescript issues following the transition from npm to pnpm

Currently, I am facing a challenge in migrating an outdated Angular JS project from npm to pnpm. The main issue I am encountering is related to typescript errors, particularly the error message that states: error TS2339: Property 'mock' does not ...

Firebase and Nx: Encountering issues with running emulators

I've been attempting to launch the Firebase emulators within the Nx workspace. Initially, I added firebase to my project: npm install firebase @angular/fire --save nx g @angular/fire:ng-add // configures the package in the project (unsuccessful) ng ...

Is there a way to quickly convert a deconstructed object into a specific type with just one

const { myFunc } = param[0].execute; Is there a way to convert myFunc to a string? This approach is ineffective const { myFunc } = param[0].execute as string; ...