Open In App

Underscore.js _.whereWhere Function

Improve
Improve
Like Article
Like
Save
Share
Report

Underscore.js _.findWhere() function is used to have a list of all the elements that match the given property. The _.findWhere() function is used to search a content in the whole list of sections. The section which contains the content will be displayed. 

Syntax:  

_.findWhere(list, properties);

Parameters:

  • List: This parameter contains the list of items.
  • Property: This parameter contains the test condition.

Return value:

The details of the element selected from the list are returned. Only the first element matched will be given as output.

Difference between _.findWhere() and _.where() function: Both the functions take an array name and the property to match but the _.where() function displays all the matches whereas, _.findWhere) function matches only the first match.

Searching a property in an array:

The ._findWhere() function takes the array elements one by one and matches whether the given property is the same or not. If the property matches it displays the rest of the details of that particular element. After the property is matched the first time the _.findWhere() function ends. It only displays the first match.

Example: In this example, we are searching for a property in an array.

HTML




<html>
 
<head>
    <title>_.findWhere() function</title>
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let users = [{ id: 1, name: "harry" }, { id: 2, name: "jerry" }];
        _.findWhere(users, { id: 2 }).name = 'tom';
        console.log(users);
    </script>
</body>
 
</html>


Output: 

Passing a list of elements with a number of different properties to _.findWhere() function:

Firstly, declare the array with all the elements and their specific properties. Then pass the array name along with the property which needs to match to the _.findWhere() function. All the rest properties will be displayed as output of that specific element.

Example: In this example, we are passing a list of elements with a number of different properties to _.findWhere() function.

HTML




<html>
 
<head>
    <title>_.findWhere() function</title>
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let goal = [
            {
                "category": "other",
                "title": "harry University",
                "value": 50000,
                "id": "1"
            },
            {
                "category": "traveling",
                "title": "tommy University",
                "value": 50000,
                "id": "2"
            },
            {
                "category": "education",
                "title": "jerry University",
                "value": 50000,
                "id": "3"
            },
            {
                "category": "business",
                "title": "Charlie University",
                "value": 50000,
                "id": "4"
            }
        ]
        console.log(_.findWhere(goal, { category: "education" }));
    </script>
</body>
 
</html>


Output: 

Passing an array with ‘true/false’ as a property to the _.findWhere() function:

First declare the array (here array is ‘people’). It is the property (here, ‘hasLong’) be defines as ‘true’ or ‘false’. Choose one condition to check like here ‘hasLongHairs’. Console.log display the final answer.

Example: In this example, we are passing an array with “true/false” as a property to the _.findWhere() function.

HTML




<html>
 
<head>
    <title>_.findWhere() function</title>
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let people = [
            { "name": "sakshi", "hasLong": "false" },
            { "name": "aishwarya", "hasLong": "true" },
            { "name": "akansha", "hasLong": "true" },
            { "name": "preeti", "hasLong": "true" }
        ]
        console.log(_.findWhere(people, { hasLong: "true" }));
    </script>
</body>
 
</html>


Output:

Passing an array of numbers as property to _.findWhere() function together:

It also follows the same procedure of firstly declaring the array with all the properties and the giving the array name and the property of matching to the _.findWhere() function.

Example: In this example, we are passing an array of numbers to the _.findWhere() function together.

HTML




<html>
 
<head>
    <title>_.findWhere() function</title>
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let users = [{ "num": "1" },
        { "num": "2" },
        { "num": "3" },
        { "num": "4" },
        { "num": "5" }];
        console.log(_.findWhere(users, { num: "2" }));
    </script>
</body>
 
</html>


Output:

 



Last Updated : 10 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads