Having trouble extracting collections from a complex JSON response in an API to map to local arrays in TypeScript using Angular-v5 and HTTPClient. While I can successfully consume the API and access properties of a TypeScript class called PolicyDetail, I am encountering errors with undefined values for local arrays and collection objects like policydetail.policyForms. The API response is visible in Swagger and through a Network tap, so the issue seems to lie in the mapping process.
The PolicyDetailViewModel model retrieved from the API includes various collections:
public class PolicyDetailViewModel
{
public string Name { get; set; }
public string Ref { get; set; }
public ICollection<PolicyDataViewModel> Purpose { get; set; } = new List<PolicyDataViewModel>();
...
}
There is also a TypeScript class called PolicyDetail with similar properties:
export class PolicyDetail extends AuditableBase
{
name:string;
ref:string;
...
}
When attempting to map the result of an HttpRequest to the TypeScript class:
export class PolicyDetailComponent {
...
getPolicyDetail() {
this.policyDetailSvc.getPolicy(this.policyId).subscribe((result) => {
this.policy = result; // works
this.forms = result.policyForms; // doesn't work
...
});
}
}
Issues arise when mapping forms arrays and other collection objects, resulting in undefined values. Attempts to access Policy.PolicyForms have also been unsuccessful, indicating a possible misunderstanding between TypeScript and C#.
Seeking clarification or guidance on resolving the mapping errors.