How to map array to another array in typescript example


This is an short tutorial on 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 other array of objects.

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

This examples works in Typescript and javascript.

How to map array of strings into array.

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

This can be achieved in different ways

First way, is using slice method of an array second, using Array.from method Third way is using spread operator

Here is an example, output is 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 Objects.

There are many ways we can achieve

Array.map method

map is an method in array used to iterate each item in an array and transform into new item.

This method takes input of n size and convert into new output with same size.

For example, We have an array of 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 new array with user object Where each user object contains 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);

Array has map() method , iterates each element of an array and constructs new object and return new array. 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 typescript

Here are sequence of steps

  • Declare array of any type, initialized an object array data
  • Declare new result array of any type which are going to assign with part of original array.
  • Iterate an array using forEach loop
  • add each item to new result with required fields
  • Finally 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 has map method which behaves 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}
            });
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

How to convert json to/from  object in angular|Typescript 

What not to commit in Angular| Ignore files in git example

Angular ngFor index - How to get current last even and odd index?

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.

Typescript Singleton pattern Implementation with example

Learn Typescript compiler option,tsconfig.json file