I want to parse an http request of this format:

[
    {
        "id": 1,
        "date": "2022-01-13T00:00:00.000 00:00",
        "time": "2022-01-13T21:21:21.000 00:00",
        "office": {
            "id": 2,
            "description": "Office2",
            "phone": "123456789",
            "enabled": 1
        },
        "officeDescr": "Office2",
        "reason": 2,
        "reasonDescr": "Studies",
        "file": "1.pdf",
        "status": 0,
        "userIn": {
            "username": "name",
            "password": "'$2a$04$DR/f..s1siWJc8Xg3eJgpeB28a4V6kYpnkMPeOuq4rLQ42mJUYFGC",
            "enabled": 1,
            "firstname": "fname",
            "lastname": "lanme",
            "asm": 123,
            "office": 2,
            "authorities": [
                {
                    "authority": "ROLE_POLITIS"
                }
            ]
        },
        "commentIn": null,
        "userValid": null,
        "commentValid": null,
        "userApproved": null,
        "commentApproved": null
    },
    {
        "id": 2,
        "date": "2022-01-13T00:00:00.000 00:00",
        "time": "2022-01-13T22:22:22.000 00:00",
        "office": {
            "id": 2,
            "description": "Office2",
            "phone": "123456789",
            "enabled": 1
        },
        "officeDescr": "Office2",
        "reason": 3,
        "reasonDescr": "Health",
        "file": "2.pdf",
        "status": 0,
        "userIn": {
            "username": "somename",
            "password": "'$2a$04$DR/f..s1siWJc8Xg3eJgpeB28a4V6kYpnkMPeOuq4rLQ42mJUYFGC",
            "enabled": 1,
            "firstname": "somename",
            "lastname": "saomelastname",
            "asm": 456,
            "office": 2,
            "authorities": [
                {
                    "authority": "ROLE_POLITIS"
                }
            ]
        },
        "commentIn": null,
        "userValid": null,
        "commentValid": null,
        "userApproved": null,
        "commentApproved": null
    },
    {
        "id": 3,
        "date": "2022-01-13T00:00:00.000 00:00",
        "time": "2022-01-13T23:23:23.000 00:00",
        "office": {
            "id": 3,
            "description": "Office3",
            "phone": "777777777",
            "enabled": 1
        },
        "officeDescr": "Office3",
        "reason": 3,
        "reasonDescr": "Health",
        "file": "3.pdf",
        "status": 0,
        "userIn": {
            "username": "politis3",
            "password": "'$2a$04$DR/f..s1siWJc8Xg3eJgpeB28a4V6kYpnkMPeOuq4rLQ42mJUYFGC",
            "enabled": 1,
            "firstname": "Politis3",
            "lastname": "PolitisOffice3",
            "asm": 789,
            "office": 3,
            "authorities": [
                {
                    "authority": "ROLE_POLITIS"
                }
            ]
        },
        "commentIn": null,
        "userValid": null,
        "commentValid": null,
        "userApproved": null,
        "commentApproved": null
    }
]

I want get the username form the Object userIn but so far i only managed to get the whole userIn object with this:

    this.applicationService.get().subscribe(
      (applications) => (console.log(applications.body.find(s=>s.userIn).userIn)));

Is there a way to get the attributes separately?

I tried to use brackets [] ant the end of applications.body.find(s=>s.userIn).userIn to get the attribute i want but it always returns undefined.

EDIT
I have this service that uses HttpClient to get an api from the Backend server

  getPostponements(): Observable<HttpResponse<Application[]>> {
    const url = `${this.apiUrl2}/postponements`;
    return this.http.get<Application[]>(url,{ observe: 'response' })
  }

The applications type inside the .subscribe is HttpResponse<Application[]>

I also have a Model called Application.ts:

export interface Application {
    id?: number;
    date: string;
    time: string;
    reason: number;
    reasonDescr: string;
    office: number;
    officeDescr: string;
    file: string;
    userIn: number;
    commentIn: string;
    userValid: string;
    commentValid: string;
    userApproved: string;
    commentApproved: string;
    status: number;
}

CodePudding user response：

As @GetOffMyLawn mentioned in the comment that your model was wrong for userIn.

With Json2Ts, theApplication class should be as below:

export interface Office {
  id: number;
  description: string;
  phone: string;
  enabled: number;
}

export interface Authority {
  authority: string;
}

export interface UserIn {
  username: string;
  password: string;
  enabled: number;
  firstname: string;
  lastname: string;
  asm: number;
  office: number;
  authorities: Authority[];
}

export interface Application {
  id: number;
  date: Date;
  time: Date;
  office: Office;
  officeDescr: string;
  reason: number;
  reasonDescr: string;
  file: string;
  status: number;
  userIn: UserIn;
  commentIn?: any;
  userValid?: any;
  commentValid?: any;
  userApproved?: any;
  commentApproved?: any;
}

Meanwhile, to get the userIn, you have to modify logic as well. (Since you don't specify which userIn's username you want to get, I provide some methods for your reference.)

Get the first Application item for userIn's username (Provided by @GetOffMyLawn's comment)

applications.body[0].userIn.username

Get userIn's username by Application's id

applications.body.find((x) => x.id == /* applicationId */).userIn.username

Get all userIns' username

applications.body.map(
  (x: Application) => x.userIn.username
)

Sample Demo on StackBlitz