TypeScript array.map() with dynamic keys

Question

I have an array of Foo called fooArray, but I would like to map() the array to only contain the “key: value” pairs which are defined in arrayOfKeys.

class Foo {
  id: number;
  name: string;
  age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}

let fooArray: Foo[] = [
  new Foo(1, 'Foo', 20), 
  new Foo(2, 'Bar', 21),
  new Foo(3, 'MyFoo', 20)
  ];


//The keys I would like to select from Foo.
const arrayOfKeys: (keyof Foo)[] = ['name', 'age'];

I do not know what to do to get the desired result below:

// The result is a copy of 'fooArray', but the objects only 
// contain the keys (and their values) defined in 'arrayOfKeys'.
[
   { name: 'Foo', age: 20 },
   { name: 'Bar', age: 21 },
   { name: 'MyFoo', age: 20 }
]

You probably want array.filter not array.map?

zerkms
– zerkms

2021-08-13 08:16:32 +00:00
Commented Aug 13, 2021 at 8:16 — zerkms
– zerkms, Commented Aug 13, 2021 at 8:16

robalem · Accepted Answer · 2021-08-13 10:43:58Z

4

You can probably do this by creating a new object in the map and returning it?

Something like

const fooArrayWithLimitedKeys = fooArray.map(item => arrayOfKeys.reduce(
  (accumulator, key) => {
    accumulator[key] = item[key]
    return accumulator
  }, {})
)

it can also be written without reduce like follows:

const fooArrayWithLimitedKeys = fooArray.map(item => {
  const returnValue = {}
  arrayOfKeys.forEach(key => {
    returnValue[key] = item[key]
  })
  return returnValue;
})

edited Aug 13, 2021 at 10:43

robalem

1674 silver badges20 bronze badges

answered Aug 13, 2021 at 8:23

codebreach

2,25018 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yevhen Horbunkov · Accepted Answer · 2021-08-13 08:32:06Z

1

Considering you simply want to modify each item of your array of objects to only contain desired keys, you may go like that:

const src = [
   { id: 1, name: 'Foo', age: 20 },
   { id: 2, name: 'Bar', age: 21 },
   { id: 3, name: 'MyFoo', age: 20 }
]

const keys = ['name', 'age']

const result = src.map(item => Object.assign(
  ...keys.map(key => ({[key]: item[key]}))
))

console.log(result)

answered Aug 13, 2021 at 8:32

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

1 Comment

robalem Over a year ago

Works perfectly in JavaScript but sadly it doesn't work in TypeScript. Error: TS2556: A spread argument must either have a tuple type or be passed to a rest parameter

Jacopo Bonomi · Accepted Answer · 2021-08-13 08:30:23Z

0

You can use Object Destructuring, inside a map function, something like that.

class Foo {
  id: number;
  name: string;
  age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}

let fooArray: Foo[] = [
  new Foo(1, 'Foo', 20), 
  new Foo(2, 'Bar', 21),
  new Foo(3, 'MyFoo', 20)
  ];
const arrayOfKeys: (keyof Foo)[] = ['name', 'age'];  

const result = fooArray.map(element =>(({name,age}) => ({name,age}))(element));
console.log(result);

edited Aug 13, 2021 at 8:30

answered Aug 13, 2021 at 8:22

Jacopo Bonomi

4683 silver badges10 bronze badges

Comments

dev · Accepted Answer · 2021-08-13 08:43:18Z

0

First of all: if you don't really need to reassign fooArray further in code I would recommend it be a const.

Then you can add something like pick function, if you don't want to use lodash or underscore:

function pick(object: any, keys: string[]) {
    return keys.map((key: string) => ({ [key]: object[key] }))
}

And use it like this:

const res = fooArray.map(el => pick(el, arrayOfKeys))

answered Aug 13, 2021 at 8:43

dev

1

Comments

t1m0n · Accepted Answer · 2021-08-13 09:07:28Z

0

Your can create generic function which will accept target array and array of fields to be extracted. You should loop on desired fields and save them to result object. Heres solution in TypeScript:

Generic function

function mapToLimitedProps<A, Keys extends (keyof A)[]>(arr: A[], keys: Keys) {
    return arr.map(item => {
        let result: Partial<{
            [key in Keys[number]]: A[key]
        }> = {};

        keys.forEach(key => {
            result[key] = item[key];
        })

        return result;
    })
}

Usage

mapToLimitedProps(fooArray, arrayOfKeys);

edited Aug 13, 2021 at 9:07

answered Aug 13, 2021 at 9:00

t1m0n

3,4411 gold badge20 silver badges22 bronze badges

Collectives™ on Stack Overflow

TypeScript array.map() with dynamic keys

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related