4 Ways to Find index array of objects in JavaScript

JavaScript

In this post, we are going to learn 4 Ways to Find an index array of objects in JavaScript.We going to use an array.map() method,array.findIndex() that introduces in ES6 to find index in object with example.

  • Using array.map()
  • using array.findIndex()
  • Using for loop
  • Using lodash library

1. array.map() to Find index array of objects in JavaScript

The array.map() method creates a new array after calling a function on each element of the array. In this example, we have an array of groceries and define the function FindValIndex(). We have returned the g.item from an array of objects and found the index of a given value.

let groceries = [
    {
        item: 'Apple',
        prize: 80,
        Quantity:20,
        purchasedDate: 'December 3, 2019'
    },

    {
        item: 'Graphes',
        prize: 100,
        Quantity:10,
        purchasedDate: 'December 21, 2020'
    }
];


function FindValIndex(value) {
  
  let Index = groceries.map(function (g) {
    return g.item;
  }).indexOf(value);
  console.log(`Index of ${value}  is = ${Index}`);
}

FindValIndex('Apple');

Output

Index of Apple  is = 0

2. Findindex() Method to find array of objects in javaScript

In ES6, Findindex() is a new method added in Array. Prototype returns the index of the first element of the array which satisfies the given condition by a callback function, otherwise, returns -1 if no element of the array satisfies the condition.

Syntax

array.findIndex(callback( element[, index[, array]] )[, thisArg])

Parameters

  • Callback: Call on each element of the array. The callback function takes these three-arguments.
    • Element: it represents the current element.
    • index: It represents the index of the current element.
    • Array: It represents the array on we are calling the find() method.
  • thisarg: It is an optional parameter. It is a value that is used as this while using callback.

In this example, we are using the array.findIndex() method with a callback function that checks if (item. item === ‘Graphes’) and returns the first element in the array that satisfy this given condition.

let groceries = [
    {
        item: 'Apple',
        prize: 80,
        Quantity:20,
        purchasedDate: 'December 3, 2019'
    },

    {
        item: 'Graphes',
        prize: 100,
        Quantity:10,
        purchasedDate: 'December 21, 2020'
    }   
];


let indx = groceries.findIndex( item => {
  if (item.item === 'Graphes') {
    return true;
  }
});
console.log('The index of value Graphes :',indx);

Output

The index of value Graphes  : 1

3. For loop to find Index of object in JavaScript

In this example, we are using for loop to find the index of the object in javascript. We are iterating each element of the given array and checking if the given value matches the prop value. If the Value is matched we will return the index of the given value else return -1.

#Program to find index array of obejct in JavaScript


let groceries = [
    {
        item: 'Apple',
        prize: 80,
        Quantity:20,
        purchasedDate: 'December 3, 2019'
    },

    {
        item: 'Graphes',
        prize: 100,
        Quantity:10,
        purchasedDate: 'December 21, 2020'
    }

   
];


Array.prototype.IndxVal = function(prop, value) {
  for (let k = 0, len = this.length; k < len; k++) {
    if (this[k][prop] === value) return k;
  }
  return -1;
}
console.log('Index of given value :',groceries.IndxVal("prize", 100));

Output

Index of given value : 1

4.lodash library to Find index of object

The javascript lightweight lodash library can be used to find the index of objects. To download the lodash library from the official website. Now import the lodash library in our code.

<script src="lodash.js"> </script>

To install and setup it up locally automatically by using this command or 

npm i --save lodash

or 
yarn add lodash

JavaScript Program to Find index array of Objects

let groceries = [
    {
        item: 'Apple',
        prize: 80,
        Quantity:20,
        purchasedDate: 'December 3, 2019'
    },

    {
        item: 'Graphes',
        prize: 100,
        Quantity:10,
        purchasedDate: 'December 21, 2020'
    }
];


var indxVal = _.findIndex(groceries, {prize: 100})
console.log(indxVal);

Output

Index of given value : 1

Summary

In this post, we have learned 4 Ways to Find an index array of objects in JavaScript by using different array methods, array.map(), array.findindex(), for loop, and lodash library with example step by step.

Related Posts