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