Skip to content
Related Articles

Related Articles

indexOf method in an object array in JavaScript

View Discussion
Improve Article
Save Article
  • Last Updated : 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.

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=
    </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=
    </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=
    </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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!