Ionic app on mobile device experiencing issue with Autocomplete feature not filtering correctly in Angular

I am facing an issue with my autocomplete form. It works perfectly fine locally, but once compiled to a PWA, the data filtering feature stops functioning properly. The API is returning a JSON array response as expected.

     var modify = function (term) {
          var result = "";
          for (var i = 0; i < term.length; i++) {
            result += accentMap[term.charAt(i)] || term.charAt(i);
          }
          return result;
        };

 search(Objobs: { Objjobs?: any; id?: any; }, filter: { name: string } = { name: '' }, page = 1): Observable<IUserResponse> {

     return this.http.get<IUserResponse>('https://example.com/api/data/123' ).pipe(
          tap((response: IUserResponse) => {
            response.results = response.results
              
           // Issue occurs on mobile devices (Android, iOS) where filtering doesn't work! 
              .map(user => new User(user.id_city, user.city_name))
              .filter(user => modify(user.city_name.toLowerCase()).includes(filter.name))
    
               return response;
               //console.log(response); 
          })
        )
}

Answer №1

The Lambda function passed to tap is not taken into consideration because tap does not modify the stream values. Additionally, it is unclear where filter.name is derived from.

To improve this code block, I suggest replacing tap with map. The updated snippet could be:

return this.http.get<IUserResponse>('https://example.com/api/users').pipe(
  map((response: IUserResponse) => {
    response.results = response.results
      .map(user => new User(user.id, user.name))
      .filter(user => normalize(user.name.toLowerCase()).includes(filter.name));
    return response;
  })  
);

Answer №2

Apologies, it seems to be a issue with the diacritic autocomplete conversion!

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

displaying a specific section depending on the radio button chosen

I am dynamically creating radio buttons using ng-repeat in my code snippet below: <input type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" /> Currently, this code generates 2 radio buttons. I would like to display a spe ...

An error has occurred: Noty (notification library) is not defined in this AngularJS Web Application

I am currently diving into the world of AngularJS and building a web application from scratch. As a newbie to AngularJS, I want to point out that I might be missing something crucial. An issue has arisen: After installing the Noty library (npm install no ...

The disadvantages of manipulating DOM in controllers in AngularJS

Many experts advise against performing DOM manipulations in AngularJS Controllers, but it can be challenging to fully understand why this is considered a best practice. While sources mention issues with testing and the primary purpose of controllers for di ...

A guide on verifying the creation of an Angular service through Jasmine testing

In front of me is a code snippet that serves as a branch from ng-wrap, taking inspiration from this particular article. Essentially, it establishes an angular service for global variables introduced by external libraries to align with the concept of depend ...

Tips for retaining the value of a variable when the page is reloaded

I need to store the value of the variable loggedIn, as it determines the behavior of a function in appComponent.html. Can you explain how I can achieve this? Template of app component: <li class="nav-item"> <a class ...

Named functions in Typescript within functional components are the best practice for improving

How can I implement handleFoo using MyType['foo']? type MyType { foo: () => void } const Comp: React.FunctionComponent<{}> = () => { function handleFoo() {} return ... } I'm looking for a solution that doesn't inv ...

Typescript is failing to perform type checking

I'm encountering an issue while trying to utilize TypeScript type checking with the following code snippet: abstract class Mammal { abstract breed(other: Mammal); } class Dog extends Mammal { breed(other: Dog) {} } class Cat extends Mammal { ...

Retrieve the input file from a different perspective

We are utilizing Razor in combination with MVC and AngularJs. In my form, there is an option to choose an image from a . You can either directly upload the selected image by clicking the submit button or proceed to another view to provide additional infor ...

Eliminate nested object properties using an attribute in JavaScript

I am working with a nested object structured like this const data = [ { id: '1', description: 'desc 1', data : [ { id: '5', description: 'desc', number :1 }, { id: '4', description: 'descip& ...

What is the best way to pass the text of a selected option in a dropdown menu to a function when a button is clicked in AngularJS?

Alright, so I've got this HTML page with a select element. The select has three options defined in the $scope below: <div id="mainID" ng-controller="theController"> <form name="assetTypeForm" class="form-horizontal" role="form" novalidat ...

Executing a dual ajax request in Angular 5

I am attempting to perform two HTTP requests consecutively, with the second request depending on the result of the first. However, it seems like I am overlooking something: getParkingSpots(date) { var gmt = this.getTimezone().subscribe(data=>{ if(d ...

Each styled component will yield the respective type definitions using (@types/styled-components)

Encountering a strange problem with styled-components in VSCode. Every component from styled-components is returning 'any'. https://i.sstatic.net/0kFJw.png https://i.sstatic.net/S20cS.png I had it working previously, but unsure when it stopped ...

Interacting with icons using TouchableOpacity and onPress functionality

I am attempting to implement onPress functionality for icons using TouchableOpacity. However, when I click on the icon, nothing happens and there are no console logs displayed. I have also tried enclosing the icon within an additional View, but that appro ...

What is the best way to pass an array through router navigate function?

I've searched for a solution in other questions, but nothing has helped me... My goal is to redirect to a URL like this: this.router.navigateByUrl('/products'); I want to pass an array and retrieve it in the component with the active link ...

AngularJS Dropdown in ASP.NET MVC 3

I want to create a DropDownList using @Html.DropDownList and connect it with AngularJS. Below is the code snippet: @Html.DropDownList("LessonID", (SelectList)ViewBag.LessonList, "choose one", new { ng_model = "LessonID" }) Here's an example of ...

Is it possible to maintain the component's DOM state when navigating away and then returning in Angular?

After spending several days researching this issue, I find myself at a dead end. I thought I was dealing with a common scenario: A user navigates to a specific page, makes some changes (such as editing an input field, scrolling through grid data, or chang ...

Angular interceptors in sequence

I'm looking to implement a queue system in Angular. My goal is to store requests in an array and process them sequentially, moving on to the next request once the current one is successful. Below is the code I tried, but unfortunately it didn't ...

Identifying Canvas Scrolling in iOS Safari using the Touchmove Event

I have encountered an issue while trying to detect scroll canvas from a touchmove event. It works perfectly on all browsers except for Safari. In Safari, the pageY and screenY coordinates of the touchmove event are not consistent. When I touch and move d ...

Can TypeScript support passing named rest arguments within the type declaration?

Using Tuple types in TypeScript enables us to create typesafe rest arguments: type Params = [string,number,string] const fn = (...args: Params) => null // Type is (args_0: string, args_1: number, args_2: string) => null Is there a method to assign ...

Steps for accessing the camera within a custom Ionic app

Currently, I am working on a unique custom application built using Ionic and Typescript. I have encountered an issue with opening the camera to capture a picture. While my app successfully opens the native camera for capturing photos, it unfortunately tak ...