JSON的动态嵌套HTML表：获取行跨度

Question

我正在接收JSON中的数据，必须将其转换为如下所示的HTML表：

{
"Main Infos": [{
    "documentName": "BAIL XGDHJG 54-OCR"
}, {
    "documentType": "Bail commercial"
}, {
    "folder": "Test export excel"
}, {
    "uploadDate": "Tue Aug 14 2018 16:01:26 GMT+0000 (UTC)"
}, {
    "fileFormat": "PDF"
}],

"calendrier": [{
    "Date de signature": "1953-09-30T00:00:00.000Z"
}, {
    "Date test": "2004-03-01T00:00:00.000Z"
}],
"Bailleur": [{
    "Dénomination sociale": [{
        "AERTY 54": [{
            "Représentant légal": "Monsieur Marcel CFDGHJ"
        }, {
            "Adresse du siege social": "LUNEVILLE (54300) 5, rue du Coq Z.À.E. de la Faïencerie"
        }]
    }],
"Dénomination2": [{
        "AERTY2": [{
            "Représentan2": "Monsieur Marcel CFDGHJ"
        }, {
            "Adresse2": "LUNEVILLE (54300) 5, rue du Coq Z.À.E. de la Faïencerie"
        }]
    }]
}],
"Preneur": [{
    "Dénomination sociale": [{
        "IMMOBEST": [{
            "Représentant légal": "Messieurs Jean—Claude FDHGSFGD et Gérard GHDJHG"
        }, {
            "Adresse du siege social": "LUNEVILLE (54300) 5, rue du Coq Z.A.E. de la Faïencerie"
        }]
    }]
}],
"Bien": [{
    "Adresse du bien": "LUNEVILLE (54300) 5 rue du Coq"
}, {
    "Surface locative": "420m2"
}, {
    "Destination des locaux & Activités autorisées": "Le preneur exerce une activité non commerciale, mais les parties décident expressément et d‘un commun accord de soumettre la présente location aux dispositions du décret du 30 Septembre 1953 codifié sous les articles L. 145—1 à L. 145—60 du code de commerce. En conséquence, le preneur bénéficiera de l‘ensemble du statut et de la propriété commerciale."
}],
"clauses": [{
    "Montant du loyer": "23280.0"
}, {
    "Fréquence de paiement": "no value"
}, {
    "Clause d'indexation du loyer": "Indice de référence. L‘indice de référence est celui du 3ème trimestre 2003, s‘élevant à 1203."
}, {
    "Indice d'indexation": "no value"
}, {
    "Trimestre de référence": "3ème trimestre"
}, {
    "Pénalités de retard": "None"
}, {
    "Dépôt de garantie": "no value"
}],
"Dates et durées": [{
    "Date de prise d'effet": "no value"
}, {
    "Date d'expiration": "no value"
}, {
    "Durée ferme": "no value"
}, {
    "Date de première échéance de résiliation triennale": "no value"
}, {
    "Date de seconde échéance de résiliation triennale": "no value"
}],
"Loyer": [{
    "Montant du loyer": "23280.0"
}, {
    "Fréquence de paiement": "no value"
}, {
    "Clause d'indexation du loyer": "Indice de référence. L‘indice de référence est celui du 3ème trimestre 2003, s‘élevant à 1203."
}, {
    "Indice d'indexation": "no value"
}, {
    "Trimestre de référence": "3ème trimestre"
}, {
    "Pénalités de retard": "None"
}, {
    "Dépôt de garantie": "no value"
}],
"Charges et Taxes": [{
    "Provision sur charges": "8000.0"
}, {
    "Taxe foncière": "no value"
}],
"Autres clauses": [],
"Autres informations": [],
"Annexes": []
}

我写了一个递归函数，可以正确地构建行和单元格：

 buildTable(obj) {
  let tableHTML = "";
  for (let key in obj) {
    let sectionName = key;
    let sections = obj[key];
    let sectionHTML = "";

    let rowStart = `<tr><th>${sectionName}</th>`;
    if (!sections.length) {
      rowStart += `<td></td></tr>`;
    } else {
      rowStart = this.recursiveBuildRows(sections, rowStart);
    }

    tableHTML += rowStart;
  }
  this.printTable(tableHTML);
},
recursiveBuildRows(sections, rowStart) {
  let html ='';
  html  += rowStart;
  sections.forEach((section, index) => {
    let subSectionName = Object.keys(section)[0];
    let subSectionContent = section[subSectionName];

    if (typeof subSectionContent === "string") {
      if (index === 0) {
        html += `<th>${subSectionName}</th><td>${subSectionContent}</td></tr>`;
      } else {
        html += `<tr><th>${subSectionName}</th><td>${subSectionContent}</td></tr>`;

      }
      return html

    } else if (Object.keys(sections[0]).length === 1){
      let nextkey = Object.keys(subSectionContent[0])[0];
      let nextvalue = subSectionContent[0][nextkey];
      html += `<th>ICI${subSectionName}</th><td>${
        Object.keys(subSectionContent[0])[0]
      }</td>`;

      html = this.recursiveBuildRows(nextvalue, html);

    } 


    else {
      let tempHTML =''
      let i = 0

        let nextValue;
        for (let k in sections[0]){
          i++
          let subSections = sections[0][k]
          let nextvalueKey = Object.keys(sections[0][k][0])[0];
          nextValue = subSections[0][nextvalueKey]
          tempHTML = i > 1 ?  `<tr><th>${nextvalueKey}</th>` : `<th>${nextvalueKey}</th>`
           html = html+tempHTML

           html = this.recursiveBuildRows(nextValue, html) 
        } 
    }
  });
  return html;
},

我现在的问题是设置单元格的{<th>和<td>）rowspan值以便正确显示。

我试图编写一个getRowSpan()函数，可以像这样在html中将其作为变量传递

<tr><th rowspan="${getRowSpan(section)}">${sectionName}</th>

但是我做错了......

这是一个完整的fiddle，并附有示例。