Converting Firebase Object Lists into Observable Arrays using Angular 2

Question

Converting Firebase Object Lists into Observable Arrays using Angular 2

I have successfully integrated Flashlight into my Angular 2 project, utilizing its powerful functionalities:

Automatically indexing specified Firebase paths to an ElasticSearch cluster and monitoring changes to re-index any modifications.
Responding to query objects written to a chosen Firebase path (e.g., 'search/request'), then writing the ElasticSearch responses to another specified Firebase path (e.g., 'search/response').

The response structure in Firebase is as follows:

https://i.sstatic.net/uiprH.png

This is how I execute a search using Angularfire 2:

searchThreads(term: string) {
    let queryBody: Object = {
        index: 'firebase',
        type: 'thread',
        q: term
    }
    this.requestKey = this.af.database.list('/search/request').push(queryBody).key
}

If I need the raw search results with all paths shown in the image above, I would do something like this:

this.af.database.list(`search/response/${this.requestKey}`)

Specifically, I am interested in extracting the objects found at _source. My goal is to loop through the response hits and display those objects on my page. How can I achieve this by creating an observable array?

angular elasticsearch typescript firebase angularfire2

Answer 1

Answer №1

Isolating just the _source children from a search response may not be feasible, but you can optimize the extraction process to make it more efficient.

Instead of retrieving the complete search response, focus on extracting and mapping each hit to its _source for better performance.

this.af.database
  .list(`search/response/${this.requestKey}/hits/hits`)
  .map(hits => hits.map(hit => hit._source))

You can also use a limit query to fetch only a subset of hits:

this.af.database
  .list(`search/response/${this.requestKey}/hits/hits`, {
    query: {
      limitToFirst: 10
    }
  })
  .map(hits => hits.map(hit => hit._source))

If you have specific criteria based on score, consider ordering the results by child before querying:

this.af.database
  .list(`search/response/${this.requestKey}/hits/hits`, {
    query: {
      orderByChild: '_score',
      startAt: 1.0
    }
  })
  .map(hits => hits.map(hit => hit._source))

(I'm unfamiliar with Flashlight's scoring mechanism, but using combinations of startAt and/or endAt should help fine-tune your query.)

Answer 2

Isolating just the _source children from a search response may not be feasible, but you can optimize the extraction process to make it more efficient.

Instead of retrieving the complete search response, focus on extracting and mapping each hit to its _source for better performance.

this.af.database
  .list(`search/response/${this.requestKey}/hits/hits`)
  .map(hits => hits.map(hit => hit._source))

You can also use a limit query to fetch only a subset of hits:

this.af.database
  .list(`search/response/${this.requestKey}/hits/hits`, {
    query: {
      limitToFirst: 10
    }
  })
  .map(hits => hits.map(hit => hit._source))

If you have specific criteria based on score, consider ordering the results by child before querying:

this.af.database
  .list(`search/response/${this.requestKey}/hits/hits`, {
    query: {
      orderByChild: '_score',
      startAt: 1.0
    }
  })
  .map(hits => hits.map(hit => hit._source))

(I'm unfamiliar with Flashlight's scoring mechanism, but using combinations of startAt and/or endAt should help fine-tune your query.)

Converting Firebase Object Lists into Observable Arrays using Angular 2

Answer №1

Similar questions

Challenge: Visual Studio 2015 MVC6 and Angular 2 compilation issue - Promise name not found

Utilizing CSS in Angular to Conceal Background Images in the Project

Struggling with setting container height to 100% in Angular/Material and encountering difficulties

Improved error messages for anticipated scenarios in Protractor

Making an API request at regular intervals of x seconds

The persistence of mobile browser localStorage appears to be somewhat unreliable

Is node.js necessary for running TypeScript?

Experiencing CORS problem in Ionic 3 when accessing API on device

Declaration of types for invoking the lodash `mapKeys` function

What is the process for exporting a TypeScript function so that it can be accessed from the command line in a web browser?

Using type definitions in non-TS files with VSCode: A beginner's guide

Is it impossible to Build your Angular project?

When the size of the mat stepper circle in Angular Material is increased, the position of the line is also adjusting accordingly

How can I integrate Bootstrap with an Angular application for optimal performance?

Attention: React is unable to identify the X attribute on a DOM component

Unable to authenticate with Firebase using ReactJS

I can't seem to understand why the Firebase CLI version I installed using npm is not the same as the one

Can you explain the variance between the (Record<string, unknown>) and object type?

Exciting interactive data visualization with TypeScript/Angular utilizing Google's dynamic

Why is `type T1 = undefined & {}` never used in TypeScript?