indexOf method in an object array in JavaScript

To access the index of the object from the array of an object by having a value of an object, We are going to use a few of the methods.

  • map()
    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.
  • findIndex()
    This method returns the index of first element in array which 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 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 map() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2: This example gets the index of val_11 by findIndex() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-3: This example doesn’t get the value so returns the -1 and prints Not Found!.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.