Filtering an array dynamically in Typescript depending on the entered value

My task involves filtering arrays of objects based on input field values. Data

data: [{
  taskname: 'Test1',
  taskId: '1',
  status: 'Submitted'
}, {
  taskname: 'Test2',
  taskId: '2',
  status: 'Resolved'
}, {
  taskname: 'Test3',
  taskId: '4',
  status: 'Submitted'
}, {
  taskname: 'Test4',
  taskId: '5',
  status: 'In Progress'
}, {
  taskname: 'Test5',
  taskId: '6',
  status: 'Resolved'
}, {
  taskname: 'Test6',
  taskId: '7',
  status: 'Submitted'
}
}]

When I input

R

I want to filter the data by matching the status value with "R". Desired output

data: [{
      taskname: 'Test2',
      taskId: '2',
      status: 'Resolved'
    }, {
      taskname: 'Test5',
      taskId: '6',
      status: 'Resolved'
    }
    }]

This is my code snippet

var filteredData = data.filter(x => x.status == inputValue);

The above code snippet is not functioning as expected. Thank you for your help.

Answer №1

let filteredResults = data.filter(entry => entry.status.includes(userInput))

Utilizing String.prototype.includes() allows you to retrieve a subset of the data where the status attribute contains your specified input

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

Is it possible to dynamically generate a form using ngFor in Angular 4?

I'm attempting to generate an editable form dynamically using ngFor. Essentially, it's a data grid and I might use some other systems for this task--perhaps that's the route I should take, but I wanted to give this approach a try initially. ...

The 'getAllByRole' property is not found in the 'Screen' type. TS2339 error

I am currently developing a web application using ReactJs for the front end. While testing the code, I encountered the following error: TypeScript error in My_project/src/unitTestUtils.tsx(79,27): Property 'getAllByRole' does not exist on type & ...

Updating a string's value in Angular based on user input

I am currently developing a custom offer letter template that will dynamically update key data points such as Name, Address, Role, Salary, etc based on the selected candidate from a list. The dynamic data points will be enclosed within <<>> in ...

Ensure that the query value remains constant in Express.js

Issue: The query value is changing unexpectedly. // url: "http://localhost:4000/sr?q=%C3%BCt%C3%BC" export const search = async (req: Request, res: Response) => { try { const query = String(req.query.q) console.log("query: &quo ...

Help! My Angular CLI version 8.2.2 is displaying squares instead of the Font-awesome icons

I successfully added Font Awesome using the command npm install --save font-awesome angular-font-awesome from https://www.npmjs.com/package/angular-font-awesome. After linking it in my angular.json file: "styles": [ "src/styles.css", "node_modu ...

Combining intersecting sets within an array of sets

I am working with an array that contains minimum and maximum values for various sets. Here is an example of what the array looks like: Array ( [0] => Array ( [0] => 1200 [1] => 2400 ) [1] => Arr ...

The process of expanding a nested node in the Angular Material tree with deeply nested data

Within my Angular 7 application, I am utilizing a mat tree structure that contains nested array objects. The goal is to automatically expand specific nested sections after users make changes to the data within those sections. While I have successfully exp ...

The issue of Angular 15 Childcomponent failing to refresh the user interface despite input modifications

Within this component, I have two child components: <span>Timings:</span> <sir-project-fasetiming [faseTiming]="projectTiming.timingInitiatie" (faseTimingChanged)="faseTimingChanged($event, 'timingInitiatie')"&g ...

A guide on implementing isomorphic types in TypeScript

Consider the following scenario with two files, file.ts: let a: Message = "foo" let b: Message = "bar" let c: Message = "baz" Now let's introduce a second file, file2.ts type Message = string function fun(abc: Message): void { } When using functi ...

How can I subscribe to nested JSON objects in Angular?

I am seeking advice on working with a nested JSON object. Within our server, there is an object located at "/dev/api/sportstypes/2" structured like this; { "NBA": { "link": "https://www.nba.com/", "ticketPrice": 50 }, "UEFA": { ...

What could be causing the array to display incorrect results in React?

Showing below is a snapshot of my VScode. In this code snippet, I am declaring arr1 as an array consisting of numbers and then performing a reverse operation on it. Click here for input. The issue I am encountering is that the first paragraph in the outpu ...

Issue: Import statement cannot be used outside a module in Appium

Encountering the following error while working on a colleague's laptop, so it appears that there is no issue with the code itself. It could be related to my local packages but I am not entirely certain. node version: v18.20.1 npm version : 10.5.0 impo ...

Encountering a 404 error when trying to load a script from a local folder into a component

I've been attempting to load a JavaScript file into a component. When the file is placed outside the 'src' folder, everything works perfectly. However, when it's inside the 'src' folder, I keep getting a 404 error. I've t ...

Using an AngularJS array with ng-repeat

As soon as a websocket message is received, the code below executes: connection.onmessage = function (eventInfo) { var onConnectionMessage = JSON.parse(eventInfo.data); if (onConnectionMessage.messageType === "newRequest") { getQuizRequests(); } } T ...

The Angular @HostListener beforeunload Event is a powerful way to handle

I've implemented the following code snippet in my main app.component.ts file within my Angular 17 project: @HostListener("window:beforeunload", ["$event"]) onTabClose($event: BeforeUnloadEvent) { $event.preventDefault(); ...

During rendering, the instance attempts to reference the "handleSelect" property or method which is not defined

I've incorporated the Element-UI NavMenu component into my web application to create a navigation bar using Vue.JS with TypeScript. In order to achieve this, I have created a Vue component within a directory called "navBar," which contains the follow ...

Displaying hidden Divs in React Typescript that are currently not visible

I have an array with various titles ranging from Title1 to Title8. When these titles are not empty, I am able to display their corresponding information successfully. Now, my goal is to include a button that will allow me to show all fields. For example, ...

Angular application table enclosed in a form, failing to capture checkbox values

I am working on an Angular 6 project and have a table with checkboxes. My goal is to select a row in the table by checking the checkbox, then click a "select" button to submit the data. However, my current HTML structure does not seem to be functioning as ...

Choosing a nested object within a JavaScript object

Is there a way to select the style contents of an object within another object? The data consists of a json encoded array. In my scenario, I am using data[i].replies and getting 2. How can I access data[i].userstyles instead? It seems to be an object. I ...

What is the process for generating a fresh PSBT transaction using bitcoinjs-lib?

This is the code I've been working on import * as bitcoin from 'bitcoinjs-lib' const NETWORK = bitcoin.networks.regtest; const psbt = new bitcoin.Psbt({ network: NETWORK }); function p2shAddress(node: bitcoin.ECPairInterface): string { c ...