返回需要映射TypeScript类的复杂JSON的API

Question

我有一个返回复杂JSON的API，我想使用HTTPClient在Angular-v5中使用该API。我已成功使用该API，但问题是当我想要提取在JSON中序列化的集合并映射到TypeScript中的本地数组时，它会抛出本地数组的undefined错误以及当我尝试访问PolicyDetail（这是一个Typescript类） ）属性导航类似policydetail.policyForms然后它抛出未定义的错误，并且不能在HTML模板中使用，这就是原因。虽然它的PolicyDetail.name和其他属性的工作除了集合。

注意：API响应即将到来，我已经在Swagger中进行了测试，也可以在网络点击中看到。

模型来自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类

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>();
}

将Http请求映射到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
    });
}
}

问题是映射表单数组和其他集合对象

1. 我尝试使用表单的Local属性：PolicyForm [];但它抛出未定义。
2. 我尝试访问Policy.PolicyForms但它也抛出undefined

我想我正在把Typescript作为C＃，但不知道我在哪里犯错误。

如果我的问题不明确，那么请让我知道，我会清除任何其他混乱。

Answer 1

Parsing

从我在你的问题中看到的，如果你的响应中有一个原始的JSON字符串，你需要将它解析成一个JavaScript对象......

const policyDetail = JSON.parse(result);

如果结果是包含JSON序列化的字符串，则此方法将起作用。

C# Land vs TypeScript Land

您可能会发现另一个问题是您的C＃类具有Name和Ref等名称，因此如果您使用这些名称进行序列化，则需要匹配TypeScript中的大小写...

this.forms = result.PolicyForms
//                  ^

Answer 2

问题是使用错误的集合名称访问响应，我正在获取表单，但我试图使用PolicyForms访问。所以我将PolicyForms更改为Forms并以此结束，它应该是完美的工作。

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