Zeigen Sie durch Iteration ein verschachteltes Array von Objekten in einer HTML-Tabelle an

Question

Ich habe Folgendes input, das ein Array verschachtelter Objekte enthält.

summary是父级对象数组，run_type ist ein verschachteltes Array von Objekten.

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

Ich möchte die Tabelle wie folgt anzeigen. Da jedes summary有2个run_type，所以Name字段的rowspan 2 ist.

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

Um eine solche Tabelle statisch anzuzeigen, kann ich Folgendes tun

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

Kann mir jemand sagen, wie man diese Tabelle dynamisch anzeigt? Ich habe es auf diese Weise versucht, aber ohne Erfolg. Das Problem besteht darin, dass ich die Zeilenspanne der Namensspalte auf zwei Zeilen festlegen kann, alle anderen Spalten jedoch nicht in beiden Zeilen desselben Namensabschnitts platziert sind.

<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

问题出在于您使用了一个单独的<tr>元素来迭代run_type环境和类型。这会导致表格结构的渲染不正确。

以下是您可以修改代码以实现此目的的方法：

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