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 is the best approach to make changes to a 2D array within a React component?

Is it possible to dynamically add the URL to an iframe based on a condition being true, and then iterate through a list of URLs before

Having issues with Gson resetting values for fields that are missing in the JSON response. Any suggestions for fixes or workarounds?

The RxJS observable fails to initiate the subscribe function following the mergeMap operation

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

The issue arises with loading data from the server due to lack of definition of Mongo

I'm trying to create a drop-down list in JS that will save selected options to a database using PHP. I'm feeling a bit lost, anyone

utilizing angularjs and bootstrap to manage multiple button models

Jumping over loop iteration following a JavaScript catch block

Invoke a functional component when a button is clicked in a React application

Hiding a Div Using jQuery Depending on User's Choice

Scrolling to a specific element using jQuery after a specified delay has

Is there a way to retrieve the io object within the io.sockets.on callback function?

Creating a custom component in Angular 2 that includes several input fields is a valuable skill to have

Developing a Rails application integrated with Pusher or Faye for real

Within an Angular test scenario, execute a static method from a service that triggers an HTTP get request to fetch stored JSON data. This data is then retrieved and returned back to the service

Issue: [Issue: ENOENT: the file or directory './1695556319341.mp3' does not exist]

Uncover the contents of a JSON array by employing generics and leveraging the power of

Dynamically parallelizing functions with async and arrays

The error "TypeError: ollama.chat is not a function" has occurred when trying to use the ollama module in