How to Iterate Over a Map of Maps in JavaScript - Step by Step Examples

How to Iterate Over a Map of Maps in JavaScript ?

Answer

To iterate over a map of maps in JavaScript, you can use nested loops. The outer loop iterates over the outer map, and the inner loop iterates over the inner map.

✐ Examples

1 Iterating Over a Map of Maps with Integer Keys and Values

We can iterate over a map of maps in JavaScript where both the outer and inner maps use integers for keys and values. This example demonstrates using nested loops to print each key-value pair.

For example,

We start by declaring and initializing a map of maps named outerMap.
We use a nested loop to iterate over the outer and inner maps and print each key-value pair.

JavaScript Program

const outerMap = new Map([
    [1, new Map([
        [1, 10],
        [2, 20],
        [3, 30]
    ])],
    [2, new Map([
        [4, 40],
        [5, 50],
        [6, 60]
    ])]
]);

// Iterate over the map of maps
console.log('Iterating over map of maps with integer keys and values:');
outerMap.forEach((innerMap, outerKey) => {
    console.log(`Outer key: ${outerKey}`);
    innerMap.forEach((value, innerKey) => {
        console.log(`  Inner key: ${innerKey}, value: ${value}`);
    });
});

Output

Iterating over map of maps with integer keys and values:
Outer key: 1
  Inner key: 1, value: 10
  Inner key: 2, value: 20
  Inner key: 3, value: 30
Outer key: 2
  Inner key: 4, value: 40
  Inner key: 5, value: 50
  Inner key: 6, value: 60

2 Iterating Over a Map of Maps with Mixed Key and Value Types

We can iterate over a map of maps in JavaScript where the outer map uses strings for keys and the inner maps use integers for keys and strings for values. This example demonstrates using nested loops to print each key-value pair.

For example,

We start by declaring and initializing a map of maps named outerMap with mixed key and value types.
We use a nested loop to iterate over the outer and inner maps and print each key-value pair.

JavaScript Program

const outerMap = new Map([
    ['first', new Map([
        [1, 'one'],
        [2, 'two'],
        [3, 'three']
    ])],
    ['second', new Map([
        [4, 'four'],
        [5, 'five'],
        [6, 'six']
    ])]
]);

// Iterate over the map of maps
console.log('Iterating over map of maps with mixed key and value types:');
outerMap.forEach((innerMap, outerKey) => {
    console.log(`Outer key: ${outerKey}`);
    innerMap.forEach((value, innerKey) => {
        console.log(`  Inner key: ${innerKey}, value: ${value}`);
    });
});

Output

Iterating over map of maps with mixed key and value types:
Outer key: first
  Inner key: 1, value: one
  Inner key: 2, value: two
  Inner key: 3, value: three
Outer key: second
  Inner key: 4, value: four
  Inner key: 5, value: five
  Inner key: 6, value: six

3 Iterating Over a Map of Maps with String Keys and Double Values

We can iterate over a map of maps in JavaScript where both the outer and inner maps use strings for keys and doubles for values. This example demonstrates using nested loops to print each key-value pair.

For example,

We start by declaring and initializing a map of maps named outerMap with strings for keys and doubles for values.
We use a nested loop to iterate over the outer and inner maps and print each key-value pair.

JavaScript Program

const outerMap = new Map([
    ['group1', new Map([
        ['A', 1.1],
        ['B', 2.2],
        ['C', 3.3]
    ])],
    ['group2', new Map([
        ['D', 4.4],
        ['E', 5.5],
        ['F', 6.6]
    ])]
]);

// Iterate over the map of maps
console.log('Iterating over map of maps with string keys and double values:');
outerMap.forEach((innerMap, outerKey) => {
    console.log(`Outer key: ${outerKey}`);
    innerMap.forEach((value, innerKey) => {
        console.log(`  Inner key: ${innerKey}, value: ${value}`);
    });
});

Output

Iterating over map of maps with string keys and double values:
Outer key: group1
  Inner key: A, value: 1.1
  Inner key: B, value: 2.2
  Inner key: C, value: 3.3
Outer key: group2
  Inner key: D, value: 4.4
  Inner key: E, value: 5.5
  Inner key: F, value: 6.6

Summary

In this tutorial, we learned How to Iterate Over a Map of Maps in JavaScript language with well detailed examples.

◀ Previous

JavaScript Tutorials

JavaScript How-Tos

How to Iterate Over a Map of Maps in JavaScript - Step by Step Examples