Array.map JSON 时间 table 到网格

Question

我用Next.js10来建一个时间表或者日程表我想要这样的东西（来自json）

bushaltestelle	zeit 1	zeit 2	zeit 3
props[0].bushaltestelle	props[0].zeiten[0]	props[0].zeiten1	props[0].zeiten[2]	...
props1.bushaltestelle	props1.zeiten[0]	props1.zeiten1	props1.zeiten[2]	...
props[2].bushaltestelle	props[2].zeiten[0]	props[2].zeiten1	props[2].zeiten[2]	...
...	...	...	...	...

json:

[
   {
      "bushaltestelle":"Bad Königshofen ZOB",
      "zeiten":[
         "05:55",
         "06:35",
         "06:35",
         "NULL",
         "NULL",
         "NULL",
         "07:15",
         "07:15",
         "08:15",
         "09:15",
         "10:15",
         "11:15",
         "12:15",
         "12:15",
         "NULL",
         "13:10",
         "13:15",
         "NULL",
         "14:15",
         "15:30",
         "15:15",
         "16:15",
         "16:15",
         "17:15",
         "17:15",
         "18:15"
      ]
   },
   {
      "bushaltestelle":"Bad Königshofen Schulzentrum",
      "zeiten":[
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "NULL",
         "12:17",
         "NULL",
         "13:10",
         "13:17",
         "NULL",
         "13:30",
         "NULL",
         "15:32",
         "NULL",
         "16:17",
         "NULL",
         "17:17",
         "NULL",
         "NULL"
      ]
   },
   {
      "bushaltestelle":"Großeibstadt",
      "zeiten":[
         "06:00",
         "06:40",
         "06:40",
         "NULL",
         "NULL",
         "NULL",
         "07:20",
         "07:20",
         "08:20",
         "09:20",
         "10:20",
         "11:20",
         "12:20",
         "12:20",
         "13:15",
         "NULL",
         "13:20",
         "NULL",
         "14:20",
         "15:35",
         "15:20",
         "16:20",
         "16:20",
         "17:20",
         "17:20",
         "18:20"
      ]
   }
]

我可以生成“bushaltestelle”行

{props.map(props => <div className={styles.grid_left}>{props.bushaltestelle}</div>)}

但我不知道如何生成“zeiten”

为了更好地理解：Bushaltestellen => 公交车站；时代 => 时代所以我在第一列中有公交车行驶方向的所有公交车站，然后我有公交车到达公交车站的时间。

如果我有一个不好的json设计，那么我可以改变它。但是“bushaltestellen”和“zeiten”必须能够是任何长度。所以无论我有 1 还是 200 万

，它都应该有效

编辑（感谢@yochanan sheinberger）：

{props.map(prop => 
  <grid className={styles.grid_container}>
    <div className={styles.grid_left}>{prop.bushaltestelle}</div>
    {prop.zeiten.map(zeit => <div className={styles.grid_right}>{zeit}</div>)}
  </grid>
)}

我的css:

.grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(24, 1fr);
  gap: 0px 0px;
}

.grid_left {
  grid-column: 1;
}

.grid_right {
  grid-column: 2;
}

我要回答的自定义解决方案：

<table className={styles.tg}>
  {props.map(prop =>
    <tr>
      <th className={styles.tg_0pky}>{prop.bushaltestelle}</th>
      {prop.zeiten.map(zeit => zeit === "NULL" ? <th className={styles.tg_0pky}></th> : <th className={styles.tg_0pky}>{zeit}</th>)}
    </tr>
  )}
</table>

css:

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg_0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top
}

这看起来像这样：

Answer 1

我想你将不得不做出调整，但这是我的想法。

{props.map(prop => {
 <div>
  <div className={styles.grid_left}>{prop.bushaltestelle}</div>
  {prop.zeiten.map(zeit => <div>{zeit}</div>)}
 </div>
)}

或使用 table 元素：

<table>
  {props.map((prop, i) => 
    <>
      {i === 0 && <tr><th></th>{prop.zeiten.map((z, i) => <th>{"zeit" + i}</th>)}</tr>}
      <tr>
        <th >{prop.bushaltestelle}</th>
        {prop.zeiten.map(zeit => <td>{zeit !== "NULL" ? zeit : "-"}</td>)}
      </tr>
    </>
  )}
</table>

Array.map JSON 时间 table 到网格

Array.map JSON time table to grid

javascript

arrays

next.js

css-grid

array.prototype.map