How To Define Nested Object Model In Angular?

Property roleDto does not exist on type TeamMembersDropdownDto[]. Cause I wanted to assign the this.model.teamMembersDto.roleDto to teamMembersDto as you can see below. The roleDto

Solution 1:

If we want all the roles available for the given team, we could reduce them as below.

const roles = data.reduce(
  (teamRoles, team) =>
    team.teamMembersDto.reduce(
      (memberRoles, member) => [...memberRoles, ...member.roleDto],
      teamRoles
    ),
  []
);

Solution 2:

Solution 1

As a reference to @Ramesh's answer, you can flat the array to get roleDto from teamMembersDto as below:

private _createModelForm(): FormGroup {
  const roles = this.model.teamMembersDto.reduce(
    (teamMembers, member) => [...teamMembers, ...member.roleDto],
    []
  );

  console.log("Roles: ", roles);

  return this.fb.group({
    id: [this.model.id || 0],
    teamMembersDto: [roles || []],
    teamTransactionDetailsDto: [this.model.teamTransactionDetailsDto || []]
  });
}

---

Solution 2

Alternative, you can do with (reduce and concat) way as well:

private _createModelForm(): FormGroup {
  const rolesByTeam = this.model.teamMembersDto.map(teamMember => {
    return teamMember.roleDto.reduce((roles, role) => roles.concat(role), []);
  });

  const roles = rolesByTeam.reduce((arr, role) => arr.concat(role), []);

  console.log("Roles by team: ", rolesByTeam);
  console.log("Roles: ", roles);

  return this.fb.group({
    id: [this.model.id || 0],
    teamMembersDto: [roles || []],
    teamTransactionDetailsDto: [this.model.teamTransactionDetailsDto || []]
  });
}

Sample Solution on StackBlitz

---

References

Array.prototype.flat() (Reduce and concat section)

Solution 3:

So, you want to get roleDto[] from teamMembersDto[] which currently present inside the Array of data[] right? please checkout this solution

let data = [
  {
    id: 10011,
    name: 'TESTING TEAM',
    description: 'THE TEST TEAM',
    memberCount: 2,
    accountId: 4,
    status: 'Active',
    createOnString: null,
    teamMembersDto: [
      {
        id: 10017,
        firstName: 'Alexa',
        lastName: 'Ryan',
        title: 'COO',
        memberId: 1,
        roleDto: [
          {
            id: 6,
            name: 'COVP',
            isShow: true,
            transactionRoleId: 9
          },
          {
            id: 7,
            name: 'DVP Real Estate',
            isShow: true,
            transactionRoleId: 6
          }
        ]
      },
      {
        id: 10018,
        firstName: 'Briana',
        lastName: 'Christoval',
        title: null,
        memberId: 2,
        roleDto: [
          {
            id: 8,
            name: 'Architect',
            isShow: true,
            transactionRoleId: 12
          },
          {
            id: 9,
            name: 'Construction Project Director',
            isShow: true,
            transactionRoleId: 11
          }
        ]
      }
    ],
    teamTransactionDetailsDto: []
  }
];


let roleDto = data[0].teamMembersDto.map((item) => item.roleDto);
console.log(roleDto) // It will be an array of roleDto

In your component code you created variable like this model = new TeamDto();, It seems tihs model will be single Object not an Array, however you're data is one kind of array not an object

#data

[
  {
    "id": 10011,
    "name": "TESTING TEAM",
    "description": "THE TEST TEAM",
    "memberCount": 2,
    "accountId": 4,
    "status": "Active",
    "createOnString": null,
    "teamMembersDto": [
      {
        "id": 10017,
        "firstName": "Alexa",
        "lastName": "Ryan",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
          {
            "id": 6,
            "name": "COVP",
            "isShow": true,
            "transactionRoleId": 9
          },
          {
            "id": 7,
            "name": "DVP Real Estate",
            "isShow": true,
            "transactionRoleId": 6
          }
        ]
      },
      {
        "id": 10018,
        "firstName": "Briana",
        "lastName": "Christoval",
        "title": null,
        "memberId": 2,
        "roleDto": [
          {
            "id": 8,
            "name": "Architect",
            "isShow": true,
            "transactionRoleId": 12
          },
          {
            "id": 9,
            "name": "Construction Project Director",
            "isShow": true,
            "transactionRoleId": 11
          }
        ]
      }
    ],
    "teamTransactionDetailsDto": []
  },
]

I Believed that the data which you are getting inside the getTeamGeneralDetails() is an Object not an Array,

So in case of Object the solution of above problem will be like this

let data = {
    id: 10011,
    name: 'TESTING TEAM',
    description: 'THE TEST TEAM',
    memberCount: 2,
    accountId: 4,
    status: 'Active',
    createOnString: null,
    teamMembersDto: [
      {
        id: 10017,
        firstName: 'Alexa',
        lastName: 'Ryan',
        title: 'COO',
        memberId: 1,
        roleDto: [
          {
            id: 6,
            name: 'COVP',
            isShow: true,
            transactionRoleId: 9
          },
          {
            id: 7,
            name: 'DVP Real Estate',
            isShow: true,
            transactionRoleId: 6
          }
        ]
      },
      {
        id: 10018,
        firstName: 'Briana',
        lastName: 'Christoval',
        title: null,
        memberId: 2,
        roleDto: [
          {
            id: 8,
            name: 'Architect',
            isShow: true,
            transactionRoleId: 12
          },
          {
            id: 9,
            name: 'Construction Project Director',
            isShow: true,
            transactionRoleId: 11
          }
        ]
      }
    ],
    teamTransactionDetailsDto: []
  };


let roleDto = data.teamMembersDto.map((item) => item.roleDto);
console.log(roleDto) // It will be an array of roleDto

Solution 4:

for(let item of this.model.teamMembersDto) {
  for(let item1 of item.roleDto) {
    here you can access the roleDto