Converting an array of objects to an array based on an interface

Question

Converting an array of objects to an array based on an interface

I'm currently facing an issue with assigning an array of objects to an interface-based array.

Here is the current implementation in my item.ts interface:

export interface IItem {
    id: number, text: string, members: any
}

In the item.component.ts file:

export class ItemComponent {
    selectedItems: IItem[] = [];
    items: IExamItems;
    getSelected(): void {
        this.selectedItems = this.items.examItems.map(examItem=> examItem.item)
    }
}

However, I keep encountering this error:

TS2322: Type 'IItem[][]' is not assignable to type 'IItem[]'.
Type 'IItem[]' is not assignable to type 'IItem'.
Property 'id' is missing in type 'IItem[]'.

javascript arrays angular typescript

Answer 1

Answer №1

The issue with your assignment is due to the incompatible type of the value with the field. You cannot assign IItem[][] to IItem[] because the former represents an array of arrays of IItem, while the latter is simply an array of IItem. To rectify this, you will either need to flatten the array or adjust the type of the selectedItems field to IItem[][]. If flattening the array is your preferred solution, you can achieve this by using Array.prototype.concat:

const itemArr = this.items.examItems.map(examItem=> examItem.item);
this.selectedItems = Array.prototype.concat.apply([], itemArr);

Answer 2

The issue with your assignment is due to the incompatible type of the value with the field. You cannot assign IItem[][] to IItem[] because the former represents an array of arrays of IItem, while the latter is simply an array of IItem. To rectify this, you will either need to flatten the array or adjust the type of the selectedItems field to IItem[][]. If flattening the array is your preferred solution, you can achieve this by using Array.prototype.concat:

const itemArr = this.items.examItems.map(examItem=> examItem.item);
this.selectedItems = Array.prototype.concat.apply([], itemArr);

Converting an array of objects to an array based on an interface

Answer №1

Similar questions

`Enhance Image with a Fresh Hue`

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

How can I ensure that the images span the entire width of the page in ResponsiveSlides?

A warning has been issued: CommonsChunkPlugin will now only accept one argument

Struggling with configuring internationalization in NestJS

Strategies for extracting the type argument from a nested property and transforming it into a different value

Is there a way to filter an array of dates without using the map function when a click

Cropped portion of the captcha image located on the left side

What strategy should be employed for creating a database abstraction layer in Angular?

Transferring data using a JavaScript enhanced form

What is the best way to resume a paused animation using JavaScript?

Retrieving the status of a checkbox using Angular's field binding feature

Combining two disciplines within a single database column

Developing AJAX Post Functionality Using Only Vanilla Javascript

Creating clickable div elements within a loop

Adding x days to a Unix timestamp can be achieved by converting the Unix timestamp

Connecting a dynamically assessed function on the $scope to a service

Unable to view the image in browsers other than Internet Explorer

What is the best method for implementing ajax in Codeigniter?

Guide on injecting a service into a directive within Angular version 13