Change an array of objects into a map where each object is indexed by a unique key

Question

Change an array of objects into a map where each object is indexed by a unique key

I'm attempting to transform an array of objects into a map, with the index based on a specific attribute value of the object in typescript 4.1.5

Additionally, I am only interested in attributes of a certain type (in this case, string)

A similar question was posed in javascript here : Convert object array to hash map, indexed by an attribute value of the Object

type Foo = {
        a : string
        b : number
}

const foos: Foo[] = []
// should only propose to index by 'a'
const foos_indexed_by_a = indexArrayByKey(foos, 'a')

function indexArrayByKey<T> (array: T[], key: Extract<keyof T, string>): Map<string, T> {
        return array.reduce((map, obj) => map.set(obj[key], obj), new Map<string, T>())
}

Playground Link

Currently, I am facing an issue accessing the property key of obj (resulting in a compilation error)

Thank you for your assistance :)

arrays typescript hashmap

Answer 1

Answer №1

In order to narrow down the keys based on those with a string value, the Extract method should not be used as it filters out keys that are strings (excluding numbers or symbols). Instead, you can utilize the KeyOfType function as outlined here

type KeyOfType<T, V> = keyof {
    [P in keyof T as T[P] extends V? P: never]: any
}
function indexArrayByKey<T, K extends KeyOfType<T, string>> (array: T[], key: K): Map<T[K], T> {
        return array.reduce((map, obj) => map.set(obj[key], obj), new Map<T[K], T>())
}

Playground Link

We opt for T[K] over string because T[K] could potentially be a subtype of string, prompting TypeScript to raise an error with string. However, in most scenarios, this approach should work seamlessly.

Answer 2

In order to narrow down the keys based on those with a string value, the Extract method should not be used as it filters out keys that are strings (excluding numbers or symbols). Instead, you can utilize the KeyOfType function as outlined here

type KeyOfType<T, V> = keyof {
    [P in keyof T as T[P] extends V? P: never]: any
}
function indexArrayByKey<T, K extends KeyOfType<T, string>> (array: T[], key: K): Map<T[K], T> {
        return array.reduce((map, obj) => map.set(obj[key], obj), new Map<T[K], T>())
}

Playground Link

We opt for T[K] over string because T[K] could potentially be a subtype of string, prompting TypeScript to raise an error with string. However, in most scenarios, this approach should work seamlessly.

Change an array of objects into a map where each object is indexed by a unique key

Answer №1

Similar questions

The type '{ children: Element; }' is lacking the specified properties within type - NextJS version 13.0.6 with TypeScript version 4.9.3

Dynamically assign values to object properties of varying data types using indexing

Shifting the use of @Inject(MAT_DIALOG_DATA) away from class constructors

Mastering Angular 7: A guide to efficiently binding values to radio buttons

Error message: "The toJSON method is not found for the item in the nested array of

What is the best way to monitor parameter changes in a nested route?

How can you implement Higher Order Components as a decorator in TypeScript?

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Calculating the frequency of a variable within a nested object in an Angular application

What is the best way to dynamically validate the fields and generate an array?

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

Setting an initial value for an @Output EventEmitter in Angular 6 is a breeze

Transform Material UI Typography to css-in-js with styled-components

Integrate TypeScript into the current project

Creating a custom event handler for form input changes using React hooks

Sending data using formData across multiple levels of a model in Angular

Utilize React Native to continuously fetch and display data from this API

SWIFT functions with arrays and dictionary data structures

Before computing the width, Next.js Swiper slide occupies the entire width

Exploring the Differences Between Arrays of Objects and Arrays in JavaScript