Select certain items from array of objects to create new array in Typescript?

Question

I would like to create an array of strings out of a separate array object.

export interface box{
    image: string,
    link: string,
    button_name: string,
    info: string, 
    description: string
}

export const BOX: box[] = [
    {image: 'image here', link: 'google.com',
    button_name: 'name', info: 'some information', description: "a description"
    },

    {image: 'image here again', link: 'another google.com',
    button_name: 'another name', info: 'some more information', description: "another description"
    },
]

Essentially I would like to create a new array out of this existing information, but it would just be an array of info. I am unsure how to implement this in typescript. I have tried using the ForEach function like so:

infos: string[] = BOX.forEach(element => element.info);

but this will return me an error saying that

Type 'void' is not assignable to type 'string[]'

How can I create an array of strings that consist of just the info fields of my existing array?

John · Accepted Answer · 2020-10-30 03:33:18Z

1

You can use the map function on the BOX-array. It will return a new array with what you put in the arrow function. If you only want the element's info, you can do this

infos: string[] = BOX.map(element => element.info);

The above has an implicit return statement, and is the shorthand for the same function below.

infos: string[] = BOX.map(element => {
   return element.info;
});

Here are some more information about the topic

edited Oct 30, 2020 at 3:33

answered Oct 30, 2020 at 0:54

John

11.6k5 gold badges60 silver badges75 bronze badges

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

1 Comment

benJephunneh Over a year ago

And just a wee shorter and perhaps a little funner, you could do Box.map(({ info }) => info) or even Box.map(({ info }) => ({ info })) if you want it typed as infos: { info: string }[].

lissitz · Accepted Answer · 2020-10-30 00:49:24Z

1

const infos = BOX.map(element => element.info);

answered Oct 30, 2020 at 0:49

lissitz

5463 silver badges9 bronze badges

1 Comment

Chris Baker Over a year ago

Explanation and links to documentation would make this a much better answer.

Derek Wang · Accepted Answer · 2020-10-30 00:51:46Z

1

infos: string[] = BOX.forEach(element => element.info);

Array.prototype.forEach returns undefined from the definition. It only executes the provided function once for each array element.

So in your case, you need to use Array.prototype.map function to map info param for each element.

const infos = BOX.map(el => el.info);

answered Oct 30, 2020 at 0:51

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Collectives™ on Stack Overflow

Select certain items from array of objects to create new array in Typescript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related