How To Find An Object In An Array In Typescript

How to find an Object in an Array in TypeScript

Knowing how to find an object in an array in Typescript will be very useful for you when working with an object array, like working with data that is constructed in object type. So how to do it? Let’s go into detail now.

How to find an object in an array in TypeScript

Use loop method

Using the loop method, I will loop over the array and then make a condition to check if the object element is what I want. Then, It will execute the code.

Example:

type infor = {
    name: string;
    age: number;
};

const objArray: infor[] = [
    { name: "Mana", age: 18 },
    { name: "Toma", age: 39 },
    { name: "Waki", age: 22 },
    { name: "Santo", age: 10 },
    { name: "James", age: 29 },
    { name: "Bitgaram", age: 18 },
    { name: "Hani", age: 22 },
    { name: "Jack", age: 25 },
    { name: "Messi", age: 29 },
];
  
// Function loop over the array,
// then check if the type property is equal to the property in each object of the array
function findObj(
    arr: Array<{ name: string; age: number }>,
    obj: { name: string; age: number }
) {
    
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].name === obj.name && arr[i].age === obj.age) {
            console.log(obj);
        }
    }
    
  }
findObj(objArray, { name: "Santo", age: 10 });

Output:

[LOG]: { "name": "Santo", "age":
10 }

Here I create a function to help you to find the object, and I use the most basic loop, which is for..loop. Just notice that object is a reference type, meaning you cannot compare two objects in a usual way. So I compare two objects by their properties. I highly recommend you create a unique property, like a critical property, that helps you easier when finding the object.

Example:           

type infor = {
    id: number;
    name: string;
    age: number;
};
  
const objArray: infor[] = [
    { id: 1, name: "Toma", age: 39 },
    { id: 2, name: "Waki", age: 22 },
    { id: 3, name: "Santo", age: 10 },
    { id: 4, name: "James", age: 29 },
    { id: 5, name: "Bitgaram", age: 18 },
    { id: 6, name: "Hani", age: 22 },
    { id: 7, name: "Jack", age: 25 },
    { id: 8, name: "Messi", age: 29 },
    { id: 9, name: "Mana", age: 18 },
];
  
// Function loop over the array,
// then check if the id property equal with id property of the object
function findObj(arr: infor[], id: number) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === id) {
        console.log(arr[i]);
        }
    }
  }
  
findObj(objArray, 5);
findObj(objArray, 8);
findObj(objArray, 9);

Output:

[LOG]: { "id": 5, "name":
"Bitgaram", "age": 18 } 
[LOG]: { "id": 8, "name": "Messi",
"age": 29 } 
[LOG]: { "id": 9, "name":
"Mana", "age": 18 }

You can also use any loop method like map or forEach with this logic to manually find the object in the object array.

Use find method

The find() method will help you search for the first element of your array that matches your condition. The find method will return the first object that satisfies the condition.

Syntax:

Array.find(callback(element, index)=>{code})

Parameters:

  • callback: The callback will be called each loop time.
  • element: Indicate the current element of the loop.
  • index: The index of the current element.

Example:

type infor = {
    id: number;
    name: string;
    age: number;
};
  
const objArray: infor[] = [
    { id: 1, name: "Toma", age: 39 },
    { id: 2, name: "Waki", age: 22 },
    { id: 3, name: "Santo", age: 10 },
    { id: 4, name: "James", age: 29 },
    { id: 5, name: "Bitgaram", age: 18 },
    { id: 6, name: "Hani", age: 22 },
    { id: 7, name: "Jack", age: 25 },
    { id: 8, name: "Messi", age: 29 },
    { id: 9, name: "Mana", age: 18 },
];
  
// Return the object if the id property equals 1
const obj = objArray.find((ele, index) => {
    return ele.id == 1;
});
  
console.log(obj);

Output:

[LOG]: { "id": 1, "name": "Toma","age": 39 }

Here by using the find method, I can return the object in the object array that satisfies the condition that id equals 2. 

Summary

 In this article, I showed you how to find an object in an array in Typescript. You can manually use the loop method to do it or the find method to compare and return that object. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *