Convert es6 map's content to an array of JSON

Question

I have a Map that is set up like this

const directory = new Map()
.set('John', { age:25, gender: 'M'} )
.set('Mary', { age:51, gender: 'M'} ) 
.set('Sam', { age:15, gender: 'M', id: 322 } )
.set('Jane', { age:15, gender: 'M', paid: true } );

I wish to transform this to an array of jsons with a new property "name" for each of the key from the map:

[
  { "name": "John", "age":25, "gender": "M" },
  { "name": "Mary", "age":51, "gender": "F" },  
  { "name": "Sam", "age":15, "gender": "M", "id": 322 },  
  { "name": "Jane", "age":19, "gender": "F", "paid": true }
]

I tried JSON.stringify([...directory]) and bunch of other stuff but the not sure of any efficient way of including the key as part of the json.

Answer 1

As you already used the spread property to destructure the Map, you then just need to map that 2d array to an array of objects, which can be easily done with array destructuring:

 [...directory].map(([name,obj]) => ({name,...obj}));

or without ESnext:

[...directory].map(([name,obj]) => Object.assign({name},obj));

Try it

Answer 2

You could use Array.from and build the wanted objects.

const directory = new Map()
        .set('John', { age: 25, gender: 'M' })
        .set('Mary', { age: 51, gender: 'M' }) 
        .set('Sam', { age: 15, gender: 'M', id: 322 })
        .set('Jane', { age: 15, gender: 'M', paid: true }),
    result = Array.from(directory, ([name, o]) => Object.assign({ name }, o));
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }