How to map an array of objects to another array of objects in Typescript

In this typescript tutorial, we will see how to map an array of objects to another array of objects using different methods in typescript. These methods are:

• Using the Array.map() method
• Using for…of loop
• Using Array.foreach() method
• Using Array.reduce() method

Map an array of objects to another array of objects in Typescript

Now, let us discuss in detail, how to map an array of objects to another array of objects in Typescript.

Using Array.map() method

Here we will see how to map an array of objects to another array of objects using the Array. map methods.

In typescript, the Array.map function is used to build an additional array with the outcomes of calling a specified function on each item in this array.

For example, Employee and EmployeeInfo are two interfaces that represent the form of the objects in the arrays. We want to map an array of Employee objects to an array of EmployeeInfo objects from an array of Employee objects.

Each Employee object is mapped to an EmployeeInfo object using the callback function provided by the user.map() method. A new EmployeeInfo object is created by the callback function using the current Employee object as an input.

Open the code editor, and create a file named mapsOneArrayOfObjectsWithAnother.ts. Then write the below code:

interface Employee {
    name: string;
    age: number;
  }
  
  interface EmployeeInfo {
    fullName: string;
    yearsOld: number;
  }
  
  const user: Employee[] = [
    { name: 'Alice', age: 30 },
    { name: 'Alex', age: 25 },
    { name: 'Charlie', age: 40 },
  ];
  
  const employeeInfo: EmployeeInfo[] = user.map(employee => {
    return {
      fullName: `${employee.name} Doe`,
      yearsOld: employee.age,
    };
  });
  
  console.log(employeeInfo);

To compile the code and run the below command and you can see the result in the console:

ts-node mapsOneArrayOfObjectsWithAnother.ts

This is an example of how to map an array of objects to another array of objects using typescript.

Using for…of loop

Here we will see how to map an array of objects to another array of objects using the for…of loop.

To iterate and access items of an array, list, or tuple collection, TypeScript supports the for…of loop. There is no requirement to utilize the conventional for loop because the for…of loop returns elements from a collection, such as an array, list, or tuple.

For example, we will use a for…of loop to iterate through the user array, mapping each object to a EmployeeInfo objects. Inside the loop, we create a new EmployeeInfo object based on the current Employee object and add it to the employeeInfo array.

In the ‘mapsOneArrayOfObjectsWithAnother.ts‘ file, write the below code:

interface Employee {
    name: string;
    age: number;
  }
  
  interface EmployeeInfo {
    fullName: string;
    yearsOld: number;
  }
  
  const user: Employee[] = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 40 },
  ];
  
  const employeeInfo: EmployeeInfo[] = [];
  
  for (const employee of user) {
    const details: EmployeeInfo = {
      fullName: `${employee.name} Doe`,
      yearsOld: employee.age,
    };
    employeeInfo.push(details);
  }
  
  console.log(employeeInfo);

To compile the code and run the below command and you can see the result in the console:

ts-node mapsOneArrayOfObjectsWithAnother.ts

This is an example of how to map an array of objects to another array of objects using the for…of loop.

Using Array.foreach() method

Here we will see how to map an array of objects to another array of objects using Array.foreach method.

The TypeScript function Array.forEach() is used to call a function for each item in an array.

For example, We iterate over the user array with the Array.forEach() method, mapping each Employee object to an EmployeeInfo object. Within the callback function, we create a new EmployeeInfo object based on the current Employee object and add it to the employeeInfo array.

In the ‘mapsOneArrayOfObjectsWithAnother.ts‘ file, write the below code:

interface Employee {
    name: string;
    age: number;
  }
  
  interface EmployeeInfo {
    fullName: string;
    yearsOld: number;
  }
  
  const user: Employee[] = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 40 },
  ];
  
  const employeeInfo: EmployeeInfo[] = [];
  
  for (const employee of user) {
    const details: EmployeeInfo = {
      fullName: `${employee.name} Doe`,
      yearsOld: employee.age,
    };
    employeeInfo.push(details);
  }
  
  console.log(employeeInfo);

To compile the code and run the below command and you can see the result in the console:

ts-node mapsOneArrayOfObjectsWithAnother.ts

This is an example of how to map an array of objects to another array of objects using Array.foreach method.

Using Array.reduce() method

Here we will see how to map an array of objects to another array of objects using Array.reduce() method.

The arr.reduce() in typescript is used to apply a function to two array values to reduce them to a single value.

For example, we will use the Array.reduce(), to iterate through the employee object in the array and accumulates the EmployeeInfo objects in an accumulator array.

In the ‘mapsOneArrayOfObjectsWithAnother.ts‘ file, write the below code:

 interface Employee {
    name: string;
    age: number;
  }
  
  interface EmployeeInfo {
    fullName: string;
    yearsOld: number;
  }
  
  const user: Employee[] = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 40 },
  ];
  
  const employeeInfo: EmployeeInfo[] = user.reduce((acc: EmployeeInfo[], employee: Employee) => {
    const details: EmployeeInfo = {
      fullName: `${employee.name} Doe`,
      yearsOld: employee.age,
    };
    return [...acc, details];
  }, []);
  
  console.log(employeeInfo);

To compile the code and run the below command and you can see the result in the console:

ts-node mapsOneArrayOfObjectsWithAnother.ts

This is an example of how to map an array of objects to another array of objects using Array.reduce method.

Conclusion

In this typescript tutorial, we saw how we to map an array of objects to another array of objects in typescript using different methods in typescript. Here are the methods we have gone through:

• Using the Array.map() method
• Using for…of loop
• Using Array.foreach() method
• Using Array.reduce() method

You may also like the following typescript tutorials:

• Convert Typescript Array to String With Separator
• Get Key by Value from enum String in Typescript
• How to push an object into an array in Typescript
• How to convert string to double in typescript