How to map array to another array in typescript example

This is a brief tutorial covering the following examples in TypeScript and JavaScript:

• How to map an array of strings into another array of strings.
• How to populate an array of objects from another array of objects. Sometimes, we receive an original array from an API, and we only want to display a specific part of that array.

These examples are applicable in both TypeScript and JavaScript.

#How to Map an Array of Strings into Another Array

Populating an array from another array is a straightforward task with multiple approaches.

• The first way using the slice method of an array.
• Another approach is to utilize the Array.from() method.
• The third method using spread operator

Here is an example, the output is the same across all methods

let roles = ["one", "two", "three"];

let sliceRoles = roles.slice();
let fromRoles = Array.from(roles);
let newRoles = [...roles];

console.log(roles);
console.log(sliceRoles);
console.log(fromRoles);
console.log(newRoles);

#How to map an Array of Objects to Another Array of Objects

There are many ways we can achieve

• Array.map method

  The map method is employed to iterate through each item in an array and transform it into a new item of the same size.

  This method takes the input of n size and converts it into new output with the same size.

  Consider an array of user objects.

  Each user contains firstname, lastname, id, role

  let users = [
    {
      id: "1",
      fname: "john",
      lname: "Ken",
      role: "admin",
    },
    {
      id: "2",
      fname: "Eric",
      lname: "Dawn",
      role: "user",
    },
    {
      id: "3",
      fname: "Andrew",
      lname: "Karvin",
      role: "admin",
    },
  ];

  To convert this array into a new array where each user object contains the name, id, and role:

  let newusers = users.map((user) => {
    return { name: user.fname + " " + user.lname, id: user.id, role: user.role };
  });
  console.log(newusers);

  The array has a map() method, iterates each element of an array and constructs a new object, and returns a new array. The new object is returned and assigned to newusers

  Output:

  [
    {
      name: "john Ken",
      id: "1",
      role: "admin",
    },
    {
      name: "Eric Dawn",
      id: "2",
      role: "user",
    },
    {
      name: "Andrew Karvin",
      id: "3",
      role: "admin",
    },
  ];

• forEach method in the typescript

  In TypeScript, the forEach method is utilized to iterate through the array and construct a new object with required fields.

  • Declare an array of any type, initialize an object array data
  • Declare a new result array of any type which is going to assign part of the original array.
  • Iterate an array using the forEach loop
  • add each item to a new result with the required fields
  • Finally, a new array is returned

  Here is an example

  var books: Array<any> = [
    {
      id: "1",
      rating: 5,
      name: "Book1",
    },
    {
      id: "2",
      rating: 4,
      name: "Book",
    },
    {
      id: "11",
      rating: 3,
      name: "Book3",
    },
  ];
  
  var bookRatings: Array<any> = [];
  
  console.log(bookRatings);
  
  books.forEach((item) => {
    bookRatings.push({
      name: item.name,
      rating: item.rating,
    });
  });
  
  console.log(bookRatings);

  Output:

  [
    {
      "name": "Book1",
      "rating": 5
    },
    {
      "name": "Book",
      "rating": 4
    },
    {
      "name": "Book3",
      "rating": 3
    }
  ]

• Using Lodash and Underscore _.map

  Both Lodash and Underscore libraries provide a map method that behaves similarly to the array method.

  let result = Arrays.map(users, function transform(user) {
    return { name: user.fname + " " + user.lname, id: user.id, role: user.role };
  });

#Conclusion

To Sum up, Learned how to map strings to an array of strings with examples.