There is an error occurring in Angular 9 when trying to implement a search filter for an object array with heterogeneous types

Trying to search through an array of objects using key-value pairs, but encountering an error in the console: core.js:5873 ERROR TypeError: obj[key].includes is not a function

a = [
{
  id: 0,
  name: "xyz",
  grade: "x",
  frade: [
    { name: "Paul", country: "Canada" },
    { name: "Lea", country: "Italy" },
    { name: "John", country: "Italy" }
  ]
},
{
  id: 1,
  name: "yaya",
  grade: "x"
},
{
  id: 2,
  name: "x",
  frade: "d"
},
{
  id: 3,
  name: "a",
  grade: "b"
}];

filterIt(arr, searchKey) {
return arr.filter(function(obj) {
  return Object.keys(obj).some(function(key) {
    return obj[key].includes(searchKey);
  });
});
}
searchCharacter(res: any) {  // on keyup event in HTML
  console.log(this.filterIt(this.a, 'b'));
}

Answer №1

If you need to change object[key] into a string:

String(obj[key]).includes

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

Exploring the Differences Between MongoDB's forEach and fetch + each Functions

When it comes to iterating over a set of documents stored in MongoDB from my Meteor app, I have two options: db.collection.find( ... ).forEach( function f( doc ){ ... }) or var docs = db.collection.find( ... ).fetch(); _.each( docs, function f( doc ){ . ...

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

So I'm working with this mat-card: <mat-card> <mat-card-content> <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};"> <site-details [site]='siteSource'></s ...

Is there a way to automatically input an array of elements into a form without having to do it manually

Is it possible to create a form using an array of items fetched from a database, and automatically populate the form with each of these elements? Currently, I'm facing difficulties as the form appears empty. What am I missing? Below is the code I ha ...

The variable being attempted to read is undefined, resulting in an error

I am attempting to access the title property of the first item in an array of objects. Interestingly, when I manually enter the following code in Chrome's JavaScript developer console: hello.example.array[0].title I successfully retrieve the title. ...

What is the best way to retrieve a specific field from the observable data stream?

When working with observables, I often find myself using them like this: ... const id = 1337; this.service.getThing(id).subscribe( suc => doSomething(suc.name), err = doSomethingElse() ); Lately, I've been utilizing the async pipe more freque ...

Ensure that Angular waits for the subscription to be completed before triggering the function to generate an Excel

I've encountered an issue with a function that generates an excel from an API request on my webpage. There's a download button that triggers the downloadCSV() function, which usually works fine except when I click it too quickly while navigating ...

Comprehending the inner workings of a function loop

I'm curious about why the inner for loop actually runs. From my understanding, with j = 1 and i = 0, j <= i;, it seems like the condition wouldn't be met as j is already greater than i. Therefore, I expected the inner loop to be skipped, resul ...

Obtain the values from this JSON array

o = { "photos": { "page": 1, "pages": 46, "perpage": 5, "total": "230", "photo": [{ "id": "6643924777", "owner": "34653895@N08", "secret": "3b7c2f6469", "server": " ...

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

Comparing NodeIntegration, Preload Script, and IPC in Electron Framework

After thoroughly going through Electron's explanations on context isolation, IPC, and security, as well as delving into discussions like this thread about nodeIntegration and this post regarding preload.js, it's clear that there are various appro ...

Error encountered when attempting to retrieve HTML content from localhost using AJAX

Attempting to insert HTML code into a div element using ajax, similar to how it's done with an iframe. Testing this out locally first to avoid Same Origin Policy complications. The web application is currently hosted on a wamp server. There are two ...

fileuploader with clipboard functionality and easy drag-and-drop feature using HTML and JavaScript

I am in need of a file uploader that can be implemented using HTML and JS. My goal is to have it work on multiple platforms, specifically Google Chrome, FireFox, and IE9+, with the capability of copying and pasting screenshots as well as dragging and dropp ...

html form shifting positions based on screen resolution

I have been experimenting with a login screen design for my website recently. I created a form with a fixed position, but as the screen resolution changes, not only does the form's position shift, but also the image moves, causing an unwanted interse ...

Using an npm package: A step-by-step guide

Recently, I added the following package to my project: https://www.npmjs.com/package/selection-popup I'm curious about how to utilize its features. Can you provide some guidance on using it? ...

Assigning values to an array can lead to unpredictable outcomes

Context: My task is to create a function that uses backtracking to compare two integer arrays. The function should return 0 if the arrays are different and 1 if they are the same. The question does not specify the size of the arrays, how they are filled, o ...

C# filling multiple cells with data from an array

I have an array containing six numbers. I want to apply a specific equation to each number in the array and then display the result in a set of textboxes, corresponding to their position in the array. For example, the result of the equation for index 0 in ...

Transform the array of objects into different clusters

I am facing a challenge where I have an object returning two arrays of objects from an API. My goal is to transform this data into a new array of objects in order to effectively group the information for the Vue v-select component. For a visual representat ...

What is the method for accessing an anchor element within a <Link> component in react-router-dom?

Within my React.js app, I have a Link tag from react-router-dom that contains an href tag. The Link works properly in the application, but when attempting to access the href tag nested inside the Link, clicking on it redirects me to the specified route pat ...

Tips for successfully passing an entire object in the data of a datatable column property

I am currently using Datatables version 1.10.21 and implementing ajax with the column property to generate the datatables successfully. ajax: { url: dataUrl, //using dataUrl variable dataSrc: 'data' }, co ...

Leveraging the power of Notepad++

When I attempt to use Notepad++ for Javascript, it isn't functioning as expected. Instead of displaying the proper outcome on the web page, all I see is a jumbled mess. Currently, I am using version 6.6.7 of Notepad++. Here's my process: Typ ...