Accumulating a Map from an Array In TypeScript

Question

I have an array of TypeScript objects with shape that is essentially the following:

interface MyObject {
  id: string
  position: number
}

I am trying to convert this array into a map of id to position that looks like this for a JSON POST down the line:

{ 
   "id1": 1,
   "id2": 2,
}

One approach is to use an ES6 Map:

array.reduce((map, obj) => map.set(obj.id, obj.position), new Map())

That works, but converting an ES6 Map to JSON is problematic.

I have tried to accumulate the key-value pairs into a pure object literal, but TypeScript has been hating everything I try, which includes Indexable Types, Object.create({}), and a lot of other ideas.

How can I distill a pure object literal of key value pairs from an array of objects?

Answer 1

If your target environment supports ES2019, you could use Object.fromEntries(), like this:

function arrToObjES2019(arr: MyObject[]) {
  return Object.fromEntries(arr.map(({ id, position }) => [id, position]));
}

Or, if not, you can make your own polyfill-like version of Object.fromEntries() using array reduce() on an empty object, like this:

function fromEntries<V>(iterable: Iterable<[string, V]>) {
  return [...iterable].reduce((obj, [key, val]) => {
    obj[key] = val
    return obj
  }, {} as {[k: string]: V})
}

and then use it:

function arrToObj(arr: MyObject[]) {
  return fromEntries(arr.map(({ id, position }) => [id, position]));
}

Either way should let you do what you want:

const arr: MyObject[] = [
  { id: "id1", position: 1 },
  { id: "id2", position: 2 }
];

console.log(JSON.stringify(arrToObj(arr))); // {"id1":1,"id2":2}

Okay, hope that helps. Good luck!

Link to code

Answer 2

Just do this, it is the simplest way:

let newMap = new Map(array.map(obj => [obj.id, obj.position]));