Join Map values into a single string with JavaScript?

In JavaScript, a Map stores key-value pairs where each key is unique. To join all Map values into a single string, you can use Array.from() to convert Map values to an array, then apply join() methods.

Basic Approach

The process involves three steps: extract values from the Map, flatten nested arrays, and join them into a string.

let queryStringAppendWithURL = new Map();
queryStringAppendWithURL.set("firstParameter", ["name=John", "age=23", "countryName=US"]);
queryStringAppendWithURL.set("secondParameter", ["subjectName=JavaScript", "Marks=91"]);

let appendValue = Array.from(queryStringAppendWithURL.values())
    .map(value => value.join('&'))
    .join('&');

console.log("The appended value is: " + appendValue);

The appended value is: name=John&age=23&countryName=US&subjectName=JavaScript&Marks=91

Step-by-Step Breakdown

Let's understand each step of the process:

let myMap = new Map();
myMap.set("group1", ["apple", "banana"]);
myMap.set("group2", ["orange", "grape"]);

// Step 1: Get all values from Map
let values = Array.from(myMap.values());
console.log("Step 1 - Map values:", values);

// Step 2: Join arrays within each value
let joinedArrays = values.map(arr => arr.join('-'));
console.log("Step 2 - Joined arrays:", joinedArrays);

// Step 3: Join all results into final string
let finalString = joinedArrays.join(' | ');
console.log("Step 3 - Final string:", finalString);

Step 1 - Map values: [ [ 'apple', 'banana' ], [ 'orange', 'grape' ] ]
Step 2 - Joined arrays: [ 'apple-banana', 'orange-grape' ]
Step 3 - Final string: apple-banana | orange-grape

Different Separator Examples

You can customize separators based on your needs:

let dataMap = new Map();
dataMap.set("colors", ["red", "blue", "green"]);
dataMap.set("numbers", ["1", "2", "3"]);

// Using comma separators
let commaResult = Array.from(dataMap.values())
    .map(arr => arr.join(','))
    .join(',');
console.log("Comma separated:", commaResult);

// Using different separators for inner and outer joins
let mixedResult = Array.from(dataMap.values())
    .map(arr => arr.join('-'))
    .join(' + ');
console.log("Mixed separators:", mixedResult);

Comma separated: red,blue,green,1,2,3
Mixed separators: red-blue-green + 1-2-3

Alternative Method: Using Flat

For simpler flattening when you want all values in a single level:

let dataMap = new Map();
dataMap.set("fruits", ["apple", "banana"]);
dataMap.set("vegetables", ["carrot", "broccoli"]);

// Flatten all values and join directly
let flatResult = Array.from(dataMap.values()).flat().join(', ');
console.log("Flattened result:", flatResult);

Flattened result: apple, banana, carrot, broccoli

Conclusion

Use Array.from(map.values()).map(arr => arr.join(separator)).join(separator) to join Map values into a string. Choose appropriate separators based on your data structure and output requirements.