How to Convert a Map to an Array of Key-Value Pairs in TypeScript - Step by Step Examples

How to Convert a Map to an Array of Key-Value Pairs in TypeScript ?

Answer

To convert a map to an array of key-value pairs in TypeScript, you can use the entries() method to get an iterator of key-value pairs and then convert it to an array using the Array.from() method. This provides a convenient way to extract all key-value pairs from the map.

✐ Examples

1 Converting a Map to an Array of Key-Value Pairs Using entries() and Array.from()

We can convert a map to an array of key-value pairs in TypeScript using the entries() method, which provides an iterator of all key-value pairs in the map. We can then convert this iterator to an array using the Array.from() method.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the entries method to get an iterator of the key-value pairs in the map.
We convert the iterator to an array using the Array.from method.
We store the array of key-value pairs in a variable named entriesArray.
We print the key-value pairs to the console using the console.log function to verify the conversion.

TypeScript Program

const myMap = new Map<string, number>([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Convert map to an array of key-value pairs
const entriesArray = Array.from(myMap.entries());

// Print the key-value pairs
console.log('Key-Value Pairs:', entriesArray);

Output

Key-Value Pairs: [['one', 1], ['two', 2], ['three', 3]]

2 Converting an Empty Map to an Array of Key-Value Pairs

We can also convert an empty map to an array of key-value pairs in TypeScript using the entries() method, which returns an empty array when the map is empty.

For example,

We start by declaring an empty map named emptyMap with string keys and integer values.
We use the entries method to get an iterator of the key-value pairs in the empty map.
We convert the iterator to an array using the Array.from method.
We store the array of key-value pairs in a variable named emptyEntriesArray.
We print the key-value pairs to the console using the console.log function to verify that the array is empty.

TypeScript Program

const emptyMap = new Map<string, number>();

// Convert empty map to an array of key-value pairs
const emptyEntriesArray = Array.from(emptyMap.entries());

// Print the key-value pairs
console.log('Key-Value Pairs:', emptyEntriesArray);

Output

Key-Value Pairs: []

3 Converting a Map to an Array of Key-Value Pairs After Adding Elements

We can convert a map to an array of key-value pairs in TypeScript after adding elements using the entries() method, which provides an updated iterator of all key-value pairs in the map.

For example,

We start by declaring an empty map named dynamicMap with string keys and integer values.
We add some key-value pairs to the map using the map's set method.
We use the entries method to get an iterator of the key-value pairs in the map after adding elements.
We convert the iterator to an array using the Array.from method.
We store the array of key-value pairs in a variable named dynamicEntriesArray.
We print the key-value pairs to the console using the console.log function to verify the updated list of key-value pairs.

TypeScript Program

const dynamicMap = new Map<string, number>();

// Add elements to the map
dynamicMap.set('one', 1);
dynamicMap.set('two', 2);
dynamicMap.set('three', 3);

// Convert map to an array of key-value pairs
const dynamicEntriesArray = Array.from(dynamicMap.entries());

// Print the key-value pairs
console.log('Key-Value Pairs:', dynamicEntriesArray);

Output

Key-Value Pairs: [['one', 1], ['two', 2], ['three', 3]]

Summary

In this tutorial, we learned How to Convert a Map to an Array of Key-Value Pairs in TypeScript language with well detailed examples.

◀ Previous Next ▶

TypeScript Tutorials

TypeScript How-Tos

How to Convert a Map to an Array of Key-Value Pairs in TypeScript - Step by Step Examples