API returning Complex JSON Which Needs to Map TypeScript Class

Question

I have a API which is returning a complex JSON and I want to consume that API in Angular-v5 using HTTPClient. I have successfully consumed that API, but the problem is when I want to extract Collections serialized in JSON and map to local arrays in TypeScript then it throws error of undefined for local array and when I try to access the PolicyDetail (which is a Typescript class) properties navigating through like policydetail.policyForms then it throws undefined error, and cannot be used in HTML template that's why. Although it PolicyDetail.name and other properties works except collections.

Note: API Response is coming and I have tested in Swagger and also seen in Network tap.

Model Coming From API

  public class PolicyDetailViewModel
{
    public string Name { get; set; }
    public string Ref { get; set; }
    public ICollection<PolicyDataViewModel> Purpose { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<PolicyDataViewModel> Objectives { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<DefinitionTermViewModel> Definitions { get; set; } = new List<DefinitionTermViewModel>();
    public ICollection<PolicyReferenceViewModel> References { get; set; } = new List<PolicyReferenceViewModel>();
    public ICollection<PolicyDataViewModel> Policy { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<PolicyDataViewModel> Procedure { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<FormViewModel> Forms { get; set; } = new List<FormViewModel>();
    public string SupportingInformation { get; set; }
    public ICollection<PolicyDataViewModel> Outstanding { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<int> SelectedPackages { get; set; } = new List<int>();
    public ICollection<int> SelectedRegions { get; set; } = new List<int>();
    public bool AnyChanges { get; set; }
    public bool IsNewPolicy { get; set; }
}

TypeScript Class

export class PolicyDetail extends AuditableBase
{
name:string;
ref:string;
policyInfo:string;
keyFactsForStaff: string;

policyDataDetails: Array<PolicyDataDetail> = new Array<PolicyDataDetail>(); 
policyDefinitionTerms: Array<PolicyDefinitionTerm>= new Array<PolicyDefinitionTerm>();
policyreferences: Array<PolicyReference> = new Array<PolicyReference>();
policyForms: Array<PolicyForm> = new Array<PolicyForm>();

selectedKloes: Array<number> = new Array <number>();
selectedRegions: Array<number> = new Array<number>();
selectedClusters: Array<number> = new Array<number>();
selectedLegislations: Array<number> = new Array<number>();
}

Maping Result of HttpRequest To TypeScript

export class PolicyDetailComponent {
public policy: PolicyDetail = new PolicyDetail();
public forms: Array<PolicyForm> = new Array<PolicyForm>();
public policyId: number;
constructor(private policyDetailSvc: PolicyDetailSvc,
    private router: Router) { }

getPolicyDetail() {
    this.policyDetailSvc.getPolicy(this.policyId).subscribe((result) => {
        this.policy = result,//it works
            this.forms = result.policyForms; // it doesn't
        console.log(result, 'Result - Subscribed'),//it works and shows complete object in JSON
        console.log(this.policy, 'This.Policy- Subscribed'),//it works and shows complete object in JSON
        console.log(this.forms, 'Forms'),//undefined
            console.log(result.policyForms, 'Result Forms'),//undefined
        console.log(result.policyreferences, 'Result References')//undefined
    });
}
}

Problem is Mapping Forms Arrays and other collection objects

1. I tried using Local property of forms: PolicyForm[]; but it throws undefined.
2. I tried accessing Policy.PolicyForms but it also throws undefined

I think I'm taking Typescript as C#, but don't know where I am making mistakes.

If my question is not clear then kindly let me know, I'll clear any other confusion.

Answer 1

The problem was accessing the response with wrong collection names, I was getting Forms but I was trying to access using PolicyForms. So I change the PolicyForms to Forms and end so on and it is working as perfectly it should be.

 this.forms = result.policyForms;//it was not working because JSON response was coming forms:[], not PolicyForms:[].
this.forms=result.forms;//