How to process the results (hits) using Angular-Instasearchv3?

I am using autocomplete widget with Angular, I have based on this example https://codesandbox.io/s/loving-haibt-mcwie?file=/src/app/autocomplete.component.ts ,
The filter works correctly for me, however I want to process the results, add properties to each of the hits.

If possible I would like to convert each of the hits to a new Object,
let newArray = state.indices[0].hits.map(hit => ({
// Build my new Objetc
}))

I would like to know the 2 perspectives, adding a property to each hit, or converting all hits to a new data type

Hi @jcalderon :wave:

If I understand your question correctly, you’re wondering whether you should add those extra attributes at runtime or add them directly in your Algolia index.

Without more context, I would say that if those attributes can be relevant to the search and/or if they’re easily computable ahead of time, it might be worth it to just add them at indexing time.

If you don’t have control over the indexing or it’s not desirable or possible to change how it’s done, then adapting things in your frontend seems fine to me.

I hope this helps answer your question, don’t hesitate to clarify your question and give more context if I was way off!

Check the Sandbox please, I have a mat-autocomplete I want to add an extra key to each of the hits, depending on what it brings

<mat-option
            * ngFor = "let hit of index.hits"
            [value] = "hit.NEWPROPERTY"
            (click) = "onQuerySuggestionClick.emit (hit)"
          >

I don’t know where in the code I should “map” the results,

Could be in:

this.state.refine(($event.target as HTMLInputElement).value);

Or here

config = {
    indexName: 'prod_locations',
    searchClient,
    searchFunction: helper => {
      const page = helper.getPage();
      helper.addNumericRefinement('score', '>', 10000);
      helper.setPage(page);
      helper.search();
    }
  }

I receive this

hits [{name: 'xx', type: 'yy', desc: 'ww' }]

I want to transform each hit into

{ name: 'xx', type: [{'yy'}], description: 'ww', newProperty: (if name == 'thing' ? 1 : 2) }

I need to transform the data that algolia returns so that it is standardized with the ones I already have before performing the search

Nor do I know if I should receive the data, and perform a foreach and add it to a new array and that array will be the one that the template reads

That’s possible with connectAutocomplete and BaseWidge. You’d need to copy and create your own BaseWidget class. However for what you want to do there is a more simple solution:

Solution 1: add newProperty to your records (when indexing)
Solution 2: add newProperty in your template:


        <div *ngFor="let index of state.indices || []">
          <mat-option
            *ngFor="let hit of index.hits"
            [value]="hit.name"
            (click)="onQuerySuggestionClick.emit(hit)"
          >
            {{ hit.name }}

           {{ hit.name == 'thing' ? 1 : 2 }}
          </mat-option>
        </div>

I have expressed it in a simple way, but I must completely change the format of each of the hits for a new model, I need to know if there is a function type:

afterIndicesChange (hits => applyTransformation (hits))

How I can realice this?
Solution 1: add newProperty to your records (when indexing)

If you have a response please update the sandbox, I created a newInterface but I dont know How change the results or asign the results to new array (https://codesandbox.io/s/admiring-swirles-eoqcb?file=/src/app/app.component.ts)

Solution 1 cannot be implemented in a sandbox because it’s has to be done at indexing time.
If the transformation is that complicated, it might be a better idea to do it one and for all at indexing.

If you really want to do it on the front end, you can try transforming hits with a Angular Pipe.

You’d end up with something <mat-option *ngFor="let hit of index.hits | apply-transformation" ...

Refer to Angular docs to learn how to it: https://angular.io/guide/pipes#detecting-pure-changes-to-primitives-and-object-references

1 Like