Paparkan tatasusunan objek bersarang dalam jadual HTML dengan mengulang

Question

Saya mempunyai input berikut yang mengandungi pelbagai objek bersarang.

summary是父级对象数组，run_type ialah susunan objek bersarang.

let input = {
      "summary": [
          {
              "name": "Release",
              "run_type": [
                {
                  "environment": "6nc",
                  "type": "QA1"
                },
                {
                  "environment": "3nc",
                  "type": "QA2"
                }
              ]
          }
      ]
  }

Saya nak paparkan jadual seperti di bawah. Memandangkan setiap summary有2个run_type，所以Name字段的rowspan ialah 2.

------------------------------------
   Name    | Environment | RunType |
------------------------------------
  Release  |     6nc     |  QA1    |
           |     3nc     |  QA2    |
------------------------------------

Untuk memaparkan jadual seperti ini secara statik, saya boleh melakukan ini

<table>
  <thead>
    <tr>
      <th>Vertical</th>
      <th>Environment</th>
      <th>RunType</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="2">Release</td>
    <td>6nc</td>
    <td>QA1</td>
  </tr>
  <tr>
    <td>3nc</td>
   <td>QA2</td>
  </tr>
  </tbody>
</table>

Bolehkah seseorang memberitahu saya cara memaparkan jadual ini secara dinamik? Saya mencuba cara ini tetapi tidak berjaya. Masalahnya ialah saya boleh menjadikan rentang baris lajur Nama kepada 2 baris, tetapi semua lajur lain tidak diletakkan dalam kedua-dua baris bahagian Nama yang sama.

<table>
  <thead>
    <tr>
      <th>Vertical</th>
      <th>Environment</th>
      <th>RunType</th>
    </tr>
  </thead>
  <tbody>
     {input?.summary?.map((project, indx) => {
       return (
         <tr>
           <td rowspan="2">{project?.name}</td>
             {project?.run_type?.map((runType, indx) => {
                return (
                  <>
                    <td>{runType.environment}</td>
                    <td>{runType.type}</td>
                  </>
                );
             })}
         </tr>
       );
     })}
  </tbody>
</table>

Answer 1

Masalahnya ialah anda menggunakan <tr>元素来迭代run_typepersekitaran dan jenis yang berasingan. Ini mengakibatkan rendering struktur jadual yang salah.

Begini cara anda boleh mengubah suai kod anda untuk mencapai ini:

<tbody>
    {input?.summary?.map((project, projectIndex) => (
      <>
        {project?.run_type?.map((runType, runTypeIndex) => (
          <tr key={`${projectIndex}-${runTypeIndex}`}>
            {runTypeIndex === 0 ? (
              <td rowspan={project.run_type.length}>{project.name}</td>
            ) : null}
            <td>{runType.environment}</td>
            <td>{runType.type}</td>
          </tr>
        ))}
      </>
    ))}
  </tbody>