How to Search in an Array of Objects with Javascript

javascript
Published on November 8, 2016

Searching in an array of objects can be done in Javascript using a loop, Array.find() or Array.findIndex() methods.

Method 1 — Using a Loop

You can iterate through the array using a for loop.

var __POSTS = [ 
	{ id: 1, title: 'Apple', description: 'Description of post 1' }, 
	{ id: 2, title: 'Orange', description: 'Description of post 2' }, 
	{ id: 3, title: 'Guava', description: 'Description of post 3' }, 
	{ id: 4, title: 'Banana', description: 'Description of post 4' }
];

// Search for post with title == "Guava"
var __FOUND = -1;
for(var i=0; i<__POSTS.length; i++) {
	if(__POSTS[i].title == 'Guava') {
		// __FOUND is set to the index of the element
		__FOUND = i;
		break;
	}
}

// On success __FOUND will contain the index of the element
// On failure it will contain -1  
console.log(__FOUND); // 2

Method 2 — Using Array.find()

The Array.find() method takes a callback function as parameter and executes that function once for each element present in the array, until it finds one where the function returns a true value.

If the element is found it returns the value of the element, otherwise undefined is returned.

var __POSTS = [ 
	{ id: 1, title: 'Apple', description: 'Description of post 1' }, 
	{ id: 2, title: 'Orange', description: 'Description of post 2' }, 
	{ id: 3, title: 'Guava', description: 'Description of post 3' }, 
	{ id: 4, title: 'Banana', description: 'Description of post 4' }
];

var __FOUND = __POSTS.find(function(post, index) {
	if(post.title == 'Guava')
		return true;
});

// On success __FOUND will contain the complete element (an object)
// On failure it will contain undefined  
console.log(__FOUND); // { id: 3, title: 'Guava', description: 'Description of post 3' }

The return value may sound a little confusing. The theory says that it returns the element whereas in the code a true value is returned on success.
The reason is that the true value is used internally. The true value denotes that match has been found and there is no need to go further to the next elements in the array. On getting a true return value from the callback function, find() returns the value of that element in the array (an object in this case).

However it would have been better if the return value would just be the index of the matched element instead of the whole element. For this Array.findIndex() is used.

Method 3 — Using Array.findIndex()

Array.findIndex() is similar to Array.find() but it returns the index of the matched element.

If the element does not exist then -1 is returned.

var __POSTS = [ 
	{ id: 1, title: 'Apple', description: 'Description of post 1' }, 
	{ id: 2, title: 'Orange', description: 'Description of post 2' }, 
	{ id: 3, title: 'Guava', description: 'Description of post 3' }, 
	{ id: 4, title: 'Banana', description: 'Description of post 4' }
];

var __FOUND = __POSTS.findIndex(function(post, index) {
	if(post.title == 'Guava')
		return true;
});

// On success __FOUND will contain the index of the element
// On failure it will contain -1
console.log(__FOUND); // 2
In this Tutorial