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.

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

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

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

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

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

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

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

My Personal Notes

Recommended Posts: