HTML表单如何始终显示两类tipologiaDetail字段（缺省则为空）

问题背景 #

现有JSON数据如下：

"person": [
    {
        "id": 161,
        "description": null,
        "personDetails": [
            {
                "id": 161,
                "codiceCap": "021",
                "descrizioneComune": "ROMA",
                "descrizioneNazione": "ITALIA",
                "indirizzo": "V.LE EUROPA",
                "indirizzoEmail": null,
                "numeroTelefono1": null,
                "tipologiaDetail": "AS"
            }
        ]
    }
]

需要基于该数据生成HTML表单，要求始终显示AS和SA（注：现有代码中常量为tipologiaDetail_ST，疑似笔误）两类tipologiaDetail的所有字段，当某类数据缺失时显示空字段。当前遍历代码因缺失其中一类数据导致报错。

解决方案 #

核心思路是先初始化两类字段的空对象，确保表单绑定的对象始终存在，再用现有数据覆盖已有值：

修改后的代码 #

// 初始化两类字段的空对象，包含所有需要展示的字段
this.detailsAS = {
  id: null,
  codiceCap: '',
  descrizioneComune: '',
  descrizioneNazione: '',
  indirizzo: '',
  indirizzoEmail: null,
  numeroTelefono1: null,
  tipologiaDetail: TipiPersonConstants.tipologiaDetail_AS
};
// 若实际是SA类，替换为对应的常量和字段值
this.detailsST = {
  id: null,
  codiceCap: '',
  descrizioneComune: '',
  descrizioneNazione: '',
  indirizzo: '',
  indirizzoEmail: null,
  numeroTelefono1: null,
  tipologiaDetail: TipiPersonConstants.tipologiaDetail_ST
};

// 遍历现有数据，覆盖对应类别已有的值
model.personDetails.forEach((details) => {
  switch(details.tipologiaDetail) { 
    case TipiPersonConstants.tipologiaDetail_AS: { 
      Object.assign(this.detailsAS, details);
      break; 
    } 
    case TipiPersonConstants.tipologiaDetail_ST: { 
      Object.assign(this.detailsST, details);
      break; 
    } 
    default: { 
      this.detailsDefault = details;
      break; 
    } 
  } 
});

说明 #

1. 提前初始化空对象后，即使JSON中缺失某类数据，表单绑定的对象依然存在，不会因引用不存在的对象报错；
2. 使用Object.assign可以保留空对象中未被现有数据覆盖的字段，确保所有字段都有初始值（空字符串或null）；
3. 注意描述中的SA和代码中的ST存在不一致，需根据实际业务场景调整常量名和初始化的tipologiaDetail值。

内容的提问来源于stack exchange，提问作者lona bin