How to map array to another array in typescript example

It is a short tutorial on the below examples in typescript and javascript

• How to map an array of strings into another array string
• How to populate an array of objects from another array of objects.

Sometimes, We have an original array returned from API, We want to display the only part of an array

This example works in Typescript and javascript.

How to map an array of strings into an array

This is easy and simple to populate an array from another array.

different ways to write

The first way is using the slice method of an array second, using Array. from method The third way is 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 is a method in the array used to iterate each item in an array and transform it into a new item.

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

For example, We have an array of the user object 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",
  },
];

if we want to convert to a new array with the user object Where each user object contains the name(firstname,lastname), 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

Here is a sequence of steps

• 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
}] 

Lodash and Underscore _.map to populate another array object

Lodash and Underscore libraries have map method which behaves the same as like 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.