What is the best way to configure angular $filter to perform case-sensitive string comparisons when filtering data?

I've been working on creating a case-sensitive filter in an Angular controller to filter an array.

Here is the data:

var stoneArr = 
[
    {
        "stone_name": "Diamond",
        "id": 16
    },
    {
        "stone_name": "Ruby",
        "id": 17
    },
    {
        "stone_name": "Sapphire",
        "id": 18
    },
    {
        "stone_name": "Emerald",
        "id": 19
    }
];

The HTML input is:

<input type="text" name="stone_name" class="form-control" id="stone_name"
ng-model="propertyName" maxlength="15" required>

The filter in the controller is as follows:

var stoneObj = $filter('filter')(stoneArr, {stone_name:$scope.propertyName}, true);

However, when entering "diamond" in the input field

$scope.propertyName = "diamond";

the filter does not match this string with "Diamond".

I need to keep the exact match condition (true) but also want to match the exact string without removing it. Using loops for such large arrays is not feasible. Is there a way to achieve this?

javascriptangularjsangularjs-filter

Answer №1

Consider utilizing a match function for obtaining a case-insensitive match:

let gemObject = $filter('filter')(gemArray, function (element) {
    return element.gem_name.toLowerCase() == $scope.itemName.toLowerCase();
}, true);

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

Laravel Behat testing with JavaScript execution without the need for a designated test environment

Currently, I am working on a Laravel 5 project that utilizes Behat for acceptance testing. Moreover, I have set up this project in a Homestead Vagrant box. One of the pages on my website requires Javascript functionality, and I am utilizing the Selenium2 ...

javascriptphplaravelseleniumbehat

the div background is limited to the exact size of the text, not filling the entire

Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...

javascripthtmlcssreactjsbackground-image

What methods are available to modify the colors in an Apex bar chart?

Currently, I am in the process of constructing a bar chart using react, mui, and apex-chart. One specific requirement I have is to modify the colors of the bars displayed on the chart. Despite my efforts in attempting various solutions, I have been unsucce ...

javascriptreactjschartsmaterial-uiapexcharts

Learn the process of storing my shopping cart in cookies and efficiently managing updates within cookies

My challenge involves implementing a shopping cart feature using AngularJS. I want to store the cart items in cookies so that they persist even after page refresh. However, I'm facing an issue where my old cart gets removed upon refreshing the page. M ...

angularjscookies

Tips on incorporating CKEditor4 wiris MathML formulas into react JS

I am having trouble displaying MathML in the DOM. When I try to render it, the output is not showing correctly in the Editor. I am utilizing CKEditor4 Let me share the code below to provide more context on what I have attempted so far App.js file: impo ...

javascriptreactjsckeditormathjaxmathml

Will refreshing just a specific component update the entire page or only that particular component that was altered?

As a newcomer to React, I am thoroughly enjoying the experience so far. However, I have a basic question that is currently unclear to me. Specifically, I am in the process of learning how to lift the state of a component, and I have a reproducible example ...

javascriptreactjs

When utilizing the vue @submit directive, the FormData object may be found to be devoid

Encountering a unique edge case, I found a solution. When creating a form with Vue, I noticed that empty strings were being sent to the server. Upon investigation, it became apparent that the issue lies within the @submit directive. Interestingly, when uti ...

javascriptformsvue.js

`In NestJS Nested Schema, the @Prop decorator and mongoose options are not applied as expected

I'm currently working on constructing a Schema that includes a nested object. I am trying to define default values and required properties within the nested object, but it seems like the options I set are being ignored. task.entity.ts @Schema() expor ...

javascripttypescriptmongodbmongoosenestjs

SEO Optimized pagination for pages without modifying the URL

On my website, I utilize pagination to navigate to various event pages. However, search engines are not picking up the conferences on these pages. Take a look at the code snippet below... <a href="javascript:;" class="first" title="First" onclick="getC ...

javascriptajaxpaginationseo

The font remains the same despite the <Div style=> tag

I have a script that loads external HTML files, but I am facing an issue with changing the font to Arial. The script is as follows: <script type="text/javascript"> $(document).ready(function(){ $("#page1").click(function(){ ...

javascriptjqueryhtmlcssfonts

Adding picture to table using JavaScript

I am currently developing a Web application using the Play Framework technology. In one of my scala.html views, I have successfully displayed an image with the following code: <img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30" ...

javascripthtmlplayframework-2.0

Removing a grand-parent TR node from a table using Vue JS by triggering a method on click

I am trying to create a function that will delete the parent of the parent node of a button element when it is clicked. The code I have written so far does not seem to be working and no errors are being thrown. Can anyone help me figure out how to achieve ...

javascripteventsvue.js

Are you interested in monitoring the website's past activity?

Similar Question: How to maintain browser history when utilizing Ajax? I've been trying to find a solution for this issue, but so far I haven't had any luck. Here's the thing: I created a template for my homepage that might not be perfe ...

javascriptajax

A guide on using AJAX to update an HTML table and other data simultaneously from within a single script

I'm reaching out for your assistance. In my javascript code, I currently make two separate AJAX calls - one to create a map using openstreetmap and another to refresh an HTML table. Both PHP pages involved in these calls utilize the same MySQL reques ...

javascriptphpajax

Different Option for Ajax/Json Data Instead of Using Multiple Jquery Append Operations

I am working on a complex data-driven application that heavily relies on Ajax and Javascript. As the amount of data returned for certain value selections increases, the application is starting to struggle. This is more of a brainstorming session than a q ...

javascriptjqueryajaxjson

Using Ajax and jQuery to dynamically insert an option into a datalist

I'm in the process of building a search box using Flask, MySQL, and ajax. I've managed to retrieve the search results in JSON format within the console, but now I want to dynamically add them to the options in my datalist element in the HTML. He ...

javascripthtmljqueryjsonajax

Skip waiting for all resolves to complete before showing the views in ui-router

My current setup involves using ui-router to load various subviews within a certain state. However, some of these views require resources that have a long resolution time. I want to display the other views as soon as they are ready. This is how I am fetch ...

angularjspromiseangular-ui-router

Issues encountered with Three.js MeshBasicMaterial functionality

I am currently working on generating a texture using Three.js. The texture_f1 source I am using is a .png file, which allows the background to show through. The issue arises when attempting to set the background color using color: 0xffffff in conjunction ...

javascriptthree.jsmeshtexture-mapping

Struggling to grasp the instanceof operator in Javascript?

This article explains the concept of instanceof operator as follows: The instanceof operator checks if an object has in its prototype chain the prototype property of a constructor. All was well until I stumbled upon this code snippet from Eloquent Ja ...

javascriptinheritanceinstanceof

Problem concerning the Script tag within Javascript coding

This link is supposed to show a Google ad. I've attempted all possible solutions, but it still doesn't seem to be functioning correctly. My suspicion is that the issue lies with the closing script tag - </script>. Could you please copy th ...

javascripthtmladsensegeoip