Skip to content
Related Articles

Related Articles

Improve Article
JavaScript | Get the index of an object by its property.
  • Last Updated : 12 Jun, 2019

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.






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

      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.




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

      Output:

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



      My Personal Notes arrow_drop_up
Recommended Articles
Page :