JavaScript | Get the index of an object by its property.

The task is to get the index of the object from the array of objects of the given property name and property value using javascript. we’re going to discuss few techniques.
First few methods to know.

  • JavaScript Array map() Method:
    This method creates a new array with the return value of calling a function for every array element.
    This method calls the provided function once for each element in an array, with maintaining the order.

    Syntax:



    array.map(function(currentValue, index, arr), thisValue)
    

    Parameters:

    • function(currentValue, index, arr): This parameter is required. It specifies a function to be run for each element in the array.
      • currentValue: This parameter is required.It specifies the value of the current element.
      • index: This parameter is optional. It specifies the array index of the current element.
      • arr: This parameter is optional. It specifies the array object the current element belongs.
    • thisValue: This parameter is optional. it specifies a value to be passed to the function to be used as its “this” value.
      If this parameter is empty, the value “undefined” will be passed.
    • Example 1: This example searches for the attribute name and its value in the array and if it gets, It returns the index of an object otherwise returns -1.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE HTML>
      <html>
        
      <head>
          <title>
              JavaScript | Get index of object by its property.
          </title>
      </head>
        
      <body style="text-align:center;" id="body">
          <h1 style="color:green;">  
                  GeeksForGeeks  
              </h1>
          <p id="GFG_UP" style="font-size: 19px; 
                    font-weight: bold;">
          </p>
          <button onClick="GFG_Fun()">
              click here
          </button>
          <p id="GFG_DOWN" style="color: green;
                    font-size: 24px;
                    font-weight: bold;">
          </p>
          <script>
              var up = document.getElementById('GFG_UP');
              var arrayObj = [{
                  prop_1: 'val',
                  prop_2: 'val_12',
                  prop_3: 'val_13'
              }, {
                  prop_1: 'val',
                  prop_2: 'val_22',
                  prop_3: 'val_23'
              }];
              var down = document.getElementById('GFG_DOWN');
              up.innerHTML = JSON.stringify(arrayObj);
        
              function fun_2(array, attr, value) {
                  for (var i = 0; i < array.length; i += 1) {
                      if (array[i][attr] === value) {
                          return i;
                      }
                  }
                  return -1;
              }
        
              function GFG_Fun() {
                  var prop = 'prop_2';
                  var val = 'val_22';
        
                  down.innerHTML = "Index of prop = '" +
                      prop + "' val = '" + val +
                      "' is = " + fun_2(arrayObj, prop, val);
              }
          </script>
      </body>
        
      </html>

      chevron_right

      
      

      Output:

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

      Example 2: This example uses the JavaScript Array map() Method to get the index of the object with given property.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE HTML>
      <html>
        
      <head>
          <title>
              JavaScript 
            | Get index of object by its property.
          </title>
      </head>
        
      <body style="text-align:center;" 
            id="body">
          <h1 style="color:green;">  
                  GeeksForGeeks  
              </h1>
          <p id="GFG_UP" 
             style="font-size: 19px;
                    font-weight: bold;">
          </p>
          <button onClick="GFG_Fun()">
              click here
          </button>
          <p id="GFG_DOWN" 
             style="color: green;
                    font-size: 24px; 
                    font-weight: bold;">
          </p>
          <script>
              var up = document.getElementById('GFG_UP');
              var arrayObj = [{
                  prop_1: 'val',
                  prop_2: 'val_12',
                  prop_3: 'val_13'
              }, {
                  prop_1: 'val',
                  prop_2: 'val_22',
                  prop_3: 'val_23'
              }];
              var down = document.getElementById('GFG_DOWN');
              up.innerHTML = JSON.stringify(arrayObj);
        
              function GFG_Fun() {
                  var prop = 'prop_2';
                  var val = 'val_22';
                  down.innerHTML = "Index of prop = 
                  '" + prop + "' val = '" + val + 
                  "' is = " + arrayObj.map(function(e) {
                      return e.prop_2;
                  }).indexOf(val);
              }
          </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.