"Using RxJS to create an observable that filters and splits a string using

I need to break down a string using commas as separators into an observable for an autocomplete feature.

The string looks something like this:

nom_commune = Ambarès,ambares,Ambares,ambarès

My goal is to extract the first value from the string: Ambarès

I attempted to split it into the observable but encountered this error:

Property 'split' does not exist on type 'boolean'.

return this.http.get<IUserResponse>('https://tu.com/agriobs-codeigniter/index.php/structure/get_area/17').pipe(
  map((response: IUserResponse) => {
    response.results = response.results
      .map(user => new User(user.id_commune, user.nom_commune))
      .filter(user => user.nom_commune.includes(filter.name).split(",")[0])
     // console.log(response.results[0].nom_commune.split(",")[0]);
    return response; 
  })  
);

Answer №1

It seems like the error is occurring due to the order in which your operations are being executed.

user.nom_commune.includes(filter.name).split(",")[0])

This can be broken down into:

  1. Determine if user.nom_commune contains filter.name
  2. Attempting to split the result from the previous operation
  3. Since the result is a boolean, it cannot be split

This explains why the error is being generated.

If I were to make an educated guess, you might want to rearrange the sequence of operations as follows:

user.nom_commune.split(",").includes(filter.name)

However, this suggestion is based solely on the code snippet provided.

UPDATE Based on OP comments

return response.results
  .map(user => new User(user.id_commune, user.nom_commune))
  .filter(user => user.nom_commune.includes(filter.name))
  .map( user => user.nom_commune.split(",")[0])

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

Analyzing the memory usage of a highly extensive Single Page Application in Angular2

We are currently in the process of developing a new web application for internal use within a company. The Front End will be built using MVC 6 and Angular2. The project is substantial, with a thorough analysis revealing approximately 1000 forms that need t ...

When a variable is used in Postgresql, the ORDER BY clause is disregarded, but accurate results are returned when the variable value is

After investigating, it seems that the query is always returning rows ordered by id, regardless of the value passed in the sortType variable (verified in console). export async function fetchAnimalList(sortType) { noStore(); try { const areas = aw ...

Exploring search filtering feature for arrays in AngularJS

When the user selects multiple 'Author' choices from the people picker, I need to filter an array based on the corresponding DisplayText using ng-repeat="item in filteredart = (filteredArticles |filter: AuthorArray ") Currently, I am able to fil ...

Two errors encountered in failing Jest test

Here is the test scenario that I am currently running: it('should return Notification Groups', (done) => { fetchAppNotifications('123', 'abc').subscribe((response) => { try { expect(response).toEqual(MOCK_FET ...

Leveraging constructors for injecting dependencies in Angular is a key practice for enhancing modularity and maintainability

After reviewing the Angular Official documents and various blogs, I noticed that there are two different syntaxes for Dependency Injection (DI) when used within the constructor. Sometimes this is utilized, while other times it is not. This leads to the que ...

What could be causing the error "Type 'String' cannot be used as an index type" to appear in my TypeScript code?

My JavaScript code contains several associative arrays for fast object access, but I'm struggling to port it to TypeScript. It's clear that my understanding of TypeScript needs improvement. I've searched for solutions and come across sugges ...

Preserve Inference in Typescript Generics When Typing Objects

When utilizing a generic type with default arguments, an issue arises where the inference benefit is lost if the variable is declared with the generic type. Consider the following types: type Attributes = Record<string, any>; type Model<TAttribu ...

Consider the presence of various peer dependency versions in a react-typescript library

Currently, I am in the process of converting my react component library react-esri-leaflet to typescript. This library requires the user to install react-leaflet as a peerDependency and offers support for both react-leaflet version 3 (RLV3) and react-leafl ...

What could be the reason for receiving an undefined value when trying to determine the size of the Set

Within one of my functions, I am encountering the following code: this.personService.getPersonInfo(this.personId).subscribe((res => { let response = res.body; let num = response.personList.size; ... })) Here is what the expe ...

Having trouble reading a file in Android 11 due to a Capacitor Filesystem error

I attempted to access a file within my emulator using the readFile function of Capacitor filesystem. The file I am trying to manipulate is located in the Download folder of the emulator, and upon execution, the function returned the following error: Erro ...

The custom validation in nestjs is throwing an error due to an undefined entity manager

I've been working on developing a custom validation for ensuring unique values in all tables, but I encountered this error: ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'getRepository') TypeError: Cannot read proper ...

A conditional type used with an array to return either an Error object or a generic type when the array is destructured

Within my Typescript project, I've implemented a Result type to be returned from functions, containing either an error or some data. This can take the form of [Error, null], or [null, Data]. Here's an example: type Result<Data> = [ Error | ...

AG Grid, efficiently organizing hierarchical data with tree structures and allowing filtering at all levels, not just leaf

My grid is receiving tree formatted data, and I've noticed that when using column filters, they apply to the leaf nodes as well as show parent nodes necessary to provide a path to the leaves. I'm interested in finding a method to allow users to ...

Transmit data to a modal popup in Angular 8

Here is the code snippet written in .ts file: openFormModal(id: number) { console.log(id); const modalRef = this.modalService.open(PartidoComponent); modalRef.componentInstance.id = id; //modalRef.componentInstance.id = id; modalRef.r ...

TypeScript functions with Generic Constraints return specific values rather than just types

function createGenericCoordinates<Type extends number | string>( x: Type, y: Type ) { return { x, y }; } const genericCoordinates = createGenericCoordinates(1, 2); // Error (TS2322) // Type 3 is not assignable to type 1 | 2 genericCoordinates ...

Implementing custom color names in Material UI using TypeScript

Currently, I am utilizing Material UI alongside TypeScript and attempting to incorporate custom colors into my theme. While everything seems to be functioning properly, the VSCode linter is displaying the following message: Type '{ tan: string; lightR ...

Execute tap() function without subscribing

Can the tap() pipe function be executed without subscribing to it? observer$:BehaviorSubject<number[]> = new BehaviorSubject<number[]>([1]) getData(page:number):void{ of(page).pipe( tap({ next: (data) => this.observe ...

Having trouble debugging the current TypeScript file in VS Code because the corresponding JavaScript file is missing

In my current project using Visual Studio Code version 1.17, I am focusing on debugging the current typescript file. As part of my setup, I have a build task in place which generates a corresponding javascript file structure like so: src/folder1/folder2/m ...

Trouble with updating data in Angular 8 table

In Angular 8, I have created a table using angular material and AWS Lambda as the backend. The table includes a multi-select dropdown where users can choose values and click on a "Generate" button to add a new row with a timestamp and selected values displ ...

Angular 2 release 6 has encountered an issue with the hidden functionality not functioning properly

I'm experiencing an issue with a div element that has a [hidden] attribute. It's not working as expected. I want the div to be hidden when the cartItems array is empty, but it's not hiding. Just to mention, I am also using bootstrap in my pr ...