indexOf method in an object array in JavaScript - GeeksforGeeks

24 Nov, 2021
In this article, we will learn about the indexOf() method in an Object array in Javascript. To access the index of the object from the array having a value of an object, We are going to use a few of the methods.
By using the map() Method
By using the findIndex() Method
We will understand both methods through the examples.
JavaScript map() Method: This method creates a separate array and calls a function for every array element. This method calls the specified function once for every element in the array, maintaining the order. 
Syntax:
Array.map(function(cValue, ind, Arr), tValue)
Parameters:
cValue: This parameter is required. The value of the current element
ind: This parameter is optional. It specifies the array index of the current element
Arr: This parameter is optional. It specifies the array object to which the current element belongs.
tValue: This parameter is optional. It specifies the value to pass to function to use as its “this” value. If this is left empty, “Undefined” will be used.
Example 1: This example gets the index of val_32 by the map() method.
HTML
<!DOCTYPE html><html>  <head>    <title>JavaScript indexOf method in an object array.</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;" id="body">    <h1 style="color:green;">              GeeksforGeeks      </h1>    <p id="GFG_UP" style="color:green;"> </p>      <button onclick="gfg_Run()"> check </button>    <p id="GFG_DOWN" style="color:green;                             font-size: 20px;">    </p>            <script>    var el_up = document.getElementById("GFG_UP");    var el_down = document.getElementById("GFG_DOWN");    var GFG_Array = [{        prop_1: 'val_11',        prop_2: 'val_12'    }, {        prop_1: 'val_21',        prop_2: 'val_22'    }, {        prop_1: 'val_31',        prop_2: 'val_32'    }];    el_up.innerHTML = JSON.stringify(GFG_Array);      function gfg_Run() {        var pos = GFG_Array.map(function(e) {            return e.prop_2;        }).indexOf('val_32');        el_down.innerHTML = "Index of 'val_32' value object is = "         + pos;    }    </script></body>  </html>
Output:
map() Method
JavaScript findIndex() Method: This method returns the index of the first element in an array that satisfies the condition. If this method finds an array element for which the function returns a true value, this method returns the index of that array element and stops, Otherwise, it returns -1. 
Syntax:
Array.findIndex(function(cValue, ind, Arr), tValue)
Parameters:
cValue: This parameter is required. The value of the current element
ind: This parameter is optional. It specifies the array index of the current element
Arr: This parameter is optional. It specifies the array object to which the current element belongs.
tValue: This parameter is optional. It specifies the value to pass to function to use as its “this” value. If this is left empty, “Undefined” will be used.
Example 2: This example gets the index of val_11 by the findIndex() method.
HTML
<!DOCTYPE html><html>  <head>    <title>JavaScript indexOf method in an object array.</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;" id="body">    <h1 style="color:green;">              GeeksforGeeks          </h1>    <p id="GFG_UP" style="color:green;"> </p>      <button onclick="gfg_Run()"> check </button>    <p id="GFG_DOWN" style="color:green;              font-size: 20px;"> </p>      <script>    var el_up = document.getElementById("GFG_UP");    var el_down = document.getElementById("GFG_DOWN");    var GFG_Array = [{        prop_1: 'val_11',        prop_2: 'val_12'    }, {        prop_1: 'val_21',        prop_2: 'val_22'    }, {        prop_1: 'val_31',        prop_2: 'val_32'    }];    el_up.innerHTML = JSON.stringify(GFG_Array);      function gfg_Run() {        var pos = GFG_Array.findIndex(i => i.prop_1 === "val_11");        el_down.innerHTML = "Index of 'val_11' value object is = " + pos;    }    </script></body>  </html>
Output:
findIndex() Method
Example 3: This example doesn’t get the value so returns the -1 and prints Not Found!.
HTML
<!DOCTYPE html><html>  <head>    <title>JavaScript indexOf method in an object array.</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;" id="body">    <h1 style="color:green;">              GeeksforGeeks          </h1>    <p id="GFG_UP" style="color:green;"> </p>      <button onclick="gfg_Run()"> check </button>    <p id="GFG_DOWN" style="color:green; font-size: 20px;"> </p>      <script>    var el_up = document.getElementById("GFG_UP");    var el_down = document.getElementById("GFG_DOWN");    var GFG_Array = [{        prop_1: 'val_11',        prop_2: 'val_12'    }, {        prop_1: 'val_21',        prop_2: 'val_22'    }, {        prop_1: 'val_31',        prop_2: 'val_32'    }];    el_up.innerHTML = JSON.stringify(GFG_Array);      function gfg_Run() {        var pos = GFG_Array.findIndex(i => i.prop_1 === "val_41");        if(pos != -1) {            el_down.innerHTML = "Index of 'val_32' value object is = "             + pos;        } else {            el_down.innerHTML = "Not Found!";        }    }    </script></body>  </html>
Output:
indexOf() Method
bhaskargeeksforgeeks
javascript-array
javascript-object
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills