Creating a Map in TypeScript from an Array

Question

Creating a Map in TypeScript from an Array

I have a series of TypeScript objects structured like this:

interface MyObject {
  id: string,
  position: number
}

My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON POST request:

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

One option is utilizing an ES6 Map:

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

This method works well, but converting an ES6 Map to JSON can be tricky.

I've attempted to convert the key-value pairs into a plain object using various strategies such as Indexable Types, Object.create({}), and other approaches, but TypeScript doesn't seem to agree with any of my attempts.

How can I efficiently extract a pure object literal containing key-value pairs from an array of objects?

javascript arrays json typescript ecmascript-6

Answer 1

Answer №1

If your target environment has support for ES2019, you have the option to utilize Object.fromEntries(), as shown below:

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

Alternatively, if not supported, you can create a custom 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 apply it as follows:

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

Both methods should allow you to achieve your desired outcome:

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

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

Hope that was helpful. Best of luck!

Link to code

Answer 2

If your target environment has support for ES2019, you have the option to utilize Object.fromEntries(), as shown below:

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

Alternatively, if not supported, you can create a custom 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 apply it as follows:

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

Both methods should allow you to achieve your desired outcome:

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

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

Hope that was helpful. Best of luck!

Link to code

Answer 3

Answer №2

If you're looking for an easy solution, try the following approach:

Create a new map by mapping through the array and setting key-value pairs using obj.id and obj.position.

Answer 4

If you're looking for an easy solution, try the following approach:

Create a new map by mapping through the array and setting key-value pairs using obj.id and obj.position.

Answer 5

Answer №3

It seems to me that using reduce would be the best solution in this scenario...

const transformedArray = array.reduce((accumulator, value) => 
   Object.assign(accumulator, {[value.id]: value.position}), {});

Answer 6

It seems to me that using reduce would be the best solution in this scenario...

const transformedArray = array.reduce((accumulator, value) => 
   Object.assign(accumulator, {[value.id]: value.position}), {});

Creating a Map in TypeScript from an Array

Answer №1

Answer №2

Answer №3

Similar questions

What sets $vm.user apart from $vm.$data.user in Vuejs?

Using TypeScript with AWS Lambda: To package imports or not to package? Alternatively: Error in Runtime.ImportModule: Module '@aws-sdk/...' not found

Is it possible for me to develop a mobile application using JavaScript, HTML, and CSS and distribute it for sale on the App Store, Google Play Store, and Microsoft Mobile App Store at

eliminating reliance on promises

Transforming nested arrays using Nifi Jolt to create an array containing custom objects

What is more costly in terms of performance: toggling the visibility of a DOM node or adding/removing a DOM node?

Every time you try to import a config.json file in Typescript, it never fails

Having difficulties with long JSON strings? jQuery's JSON.parse might not be the solution for you

The Jquery calculation is giving unexpected results by returning NaN instead of an integer

Updating the value of each preceding sibling of every checked checkbox using jQuery upon form submission

Error: [$controller:ctrlreg] - The controller registration has failed

What is the maximum number of elements that can be accommodated in an array with a capacity of 5

Accessing external content within our webpage

Angular Automatically Generated Identifier for Event Detection

Ways to cancel a subscription once a specific parameter or value is met following a service/store interaction

When setting up an SQS Event on an S3 Bucket using CloudFormation, the notification destination service region must match the bucket's location constraint to be valid

AngularJS Expandable Table - Unlocking Limitless Possibilities

Sorting customization within a complex nested array structure

Error: Unable to cast object of type com.sun.org.apache.xerces.internal.dom.ElementNSImpl to

Error message on Android Web Console: ReferenceError - Worker object is not defined