API returning Complex JSON Which Needs to Map TypeScript Class - arrays

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
I tried using Local property of forms: PolicyForm[]; but it throws undefined.
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

Parsing
From what I can see in your question, if you have a raw JSON string in your response, you need to parse it into a JavaScript object...
const policyDetail = JSON.parse(result);
This will work if the result is a string, containing a JSON serialization.
C# Land vs TypeScript Land
Another issue you may find is that your C# class has names such as Name and Ref, so if you are serializing with these names, you'll need to match the casing in the TypeScript...
this.forms = result.PolicyForms
// ^

Answer 2

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;//