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.