All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Filter Object By Key Value

Last Updated : Mar 11, 2024

JavaScript Filter Object By Key Value

In this tutorial we will show you the solution of JavaScript filter object by key value, we can't use the filter() method directly on an Object because it's not iterable like arrays or strings in JavaScript.

Filter() iterates through an array, returning only the elements that meet a set of criteria into a new array.

An object is made up of a key-value pair set. In this article we shall see how JavaScript filter object by key-value.

Step By Step Guide On Javascript Filter Object By Key Value :-

Object.keys() is used to extract keys, while Object.values() is used to extract values ().

You can also use Object.entries to extract both keys and values ().

We will focus on just the keys for the purpose of filtering them against particular criteria.

Parameters

callbackFn :-

A predicate is used to test each element of an array. Return a value that is either true if the element is kept or false if it is not.

Following arguments are passed to the function:

element :-

The array's current element being processed.

index :-

Index of the element which we use in the array that is currently being processed.

array :-

The array that was used to call filter()

thisArgOptional :-

When calling callbackFn, utilise this value.

Return value :-

A new array is created for the elements that pass the test. If no elements pass the test, an empty array will be returned.

The Object.keys() method returns an array comprising strings containing the names (keys) of an object's properties. The object is defined to Object.keys() as an argument:

<html>
<head>
<title></title>
</head>
<body>
<script>
const score = {
  Nathan: 9,
  Mia: 10,
  Jack: 6,
  Sunny: 8,
};
const scoreArr = Object.entries(score);
const filteredArr = scoreArr.filter(function ([key, value]) {
  return key !== "Jack";
});
</script>
</body>
</html>
  1. To begin, type <! DOCTYPE html> to tell the web browser that the file is in HTML format.
  2. The <html> element, on the other hand, is used to signal the start of HTML content.
  3. The <head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. For example, the <head> and <title> tags are paired tags. As a result, both have the </head> and </title> closing tags.
  4. Finally, the <body> element specifies the web page's content. This is where all of the stuff for the website will be written. Our javascript code was inserted using the script tag within the body element.
  5. The Object.keys() method returns an array comprising strings containing the names (keys) of an object's properties.
  6. We have also defined values to each of the name as shown above in the code. The above code removes an element with the key "Jack" and returns the rest.
  7. You can use filter() to cycle over the existing values and return just those that fit the specified criteria once you've generated the keys. Finally, reduce() can be used to gather the filtered keys and values into a new object.
  8. The </body> and </html> tags close the body and html tags, respectively.

Conclusion :-

We looked at filtering objects by value with the Object.keys() method and filtering them with the filter() method in this brief article.

I hope this tutorial on JavaScript filter object by key value helps you.