Learn how to retrieve the return data from two combined objects using Angular's TypeScript syntax

Question

Learn how to retrieve the return data from two combined objects using Angular's TypeScript syntax

I've encountered an issue with TypeScript syntax, specifically when a WebAPI returns a DTO containing two objects. The object being returned looks like this:

{
  "userList": [{
      "id": 1,
      "firstNm": "John",
      "lastNm": "Doe"
    },
    {
      "id": 2,
      "firstNm": "Jim",
      "lastNm": "Doe"
    }
  ],
  "selectedIds": [158, 155]
}

Within my Angular TS code, I attempted to declare users as any[], however the CLI compiler is highlighting the userList property in red and stating that 'userList' is not a member of the type of any[].

I also tried creating an interface for User with memberList: any[], but encountered the same error message. So when defining users: any[] and User[], I'm faced with the same issue.

Any assistance on this matter would be greatly appreciated.

Thank you,

getUsers() {
  this.meetingService.GetCommitteeMembersAsync(this.request.meetingId)
    .subscribe((data: any[]) => {
      var _test = data;
      this.users = _test.userList;
    });
}

angular typescript

Answer 1

Answer №1

You can expect your data to have the structure of ComitteeMembersData, with users represented by UserList

users: UserList[]; // or ReadonlyArray<UserList>
...
.subscribe((data: ComitteeMembersData) => {
 // perform actions here
}



export interface ComitteeMembersData{
    userList:    UserList[];
    selectedIds: number[];
}

export interface UserList {
    id:      number;
    firstNm: string;
    lastNm:  string;
}

Answer 2

You can expect your data to have the structure of ComitteeMembersData, with users represented by UserList

users: UserList[]; // or ReadonlyArray<UserList>
...
.subscribe((data: ComitteeMembersData) => {
 // perform actions here
}



export interface ComitteeMembersData{
    userList:    UserList[];
    selectedIds: number[];
}

export interface UserList {
    id:      number;
    firstNm: string;
    lastNm:  string;
}

Answer 3

Answer №2

Here is the data format you can expect:

{
  "userList": [{
      "id": 1,
      "firstNm": "John",
      "lastNm": "Doe"
    },
    {
      "id": 2,
      "firstNm": "Jim",
      "lastNm": "Doe"
    }
  ],
  "selectedIds": [158, 155]
}

This data can be of type any, not specifically an any[]. However, data.userList may still be an array of any. To resolve any issues, follow these steps:

users: any[];
...
getUsers() {
  this.meetingService.GetCommitteeMembersAsync(this.request.meetingId)
    .subscribe((data: any) => {
      this.users = data.userList;
    });
}

Answer 4

Here is the data format you can expect:

{
  "userList": [{
      "id": 1,
      "firstNm": "John",
      "lastNm": "Doe"
    },
    {
      "id": 2,
      "firstNm": "Jim",
      "lastNm": "Doe"
    }
  ],
  "selectedIds": [158, 155]
}

This data can be of type any, not specifically an any[]. However, data.userList may still be an array of any. To resolve any issues, follow these steps:

users: any[];
...
getUsers() {
  this.meetingService.GetCommitteeMembersAsync(this.request.meetingId)
    .subscribe((data: any) => {
      this.users = data.userList;
    });
}

Learn how to retrieve the return data from two combined objects using Angular's TypeScript syntax

Answer №1

Answer №2

Similar questions

Injection of environmental variables into app services

What are the benefits of incorporating component A into component B as a regular practice?

What are the differences between TypeScript's 'Dictionary' type accessors for objects and objects with predefined members?

Angular component testing encountering undefined NgZone

Leveraging external JavaScript libraries in Angular 2

Obtain a 404 error status code when the route cannot be found in Angular 6+ using Universal

Ways to display a US map using d3.js with state names positioned outside each state and pointing towards it

Error encountered: TypeScript module 'angularfire2/interfaces' not found in Ionic 3 with angularfire2-offline plugin

Encountering Error 404 while submitting a form on Prisma, Axios, and NestJS

Having trouble executing my Node.js project written in Typescript due to an error: TypeError [ERR_UNKNOWN_FILE_EXTENSION] - the file extension ".ts" for /app/src/App.ts is unrecognized

The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Exploring the potential of Socket.io and Angular with the seamless integration of

Transition Angular 2 Release Candidate to production environment

The combination of Angular2, TypeScript, and moment.js is lacking in terms of available locales (only 'en' is supported)

TypeORM issue - UnsupportedDataTypeError

What are the common issues with Angular 2's ng-if directive?

I have to make sure not to input any letters on my digipas device

The property of the Angular Typescript object is distinctly not defined, yet the property itself is

Extract data from a string and assign it to a variable representing an

Unleash the full power of Angular Components by enhancing them with injected