在 ReactJS 中 table 的特定单元格中显示 Json 数据

Question

（我是编程新手）我有一个包含模型数据的 Json 文件，如下所示：

[{"id":1,"hour":15,"task":"Hotel Whiskey Charlie Yankee Quebec Uniform Mike Alfa Kilo Papa","location":"Tango Victor Mike Papa Kilo Delta Sierra Oscar Echo Alfa Zulu Quebec"},
{"id":2,"hour":23,"task":"Victor Tango Echo November Juliett Yankee Romeo Quebec Hotel Lima Zulu Delta","location":"Romeo Golf Kilo Echo X-ray Hotel Foxtrot Bravo India Quebec Charlie Mike Papa Lima Juliett Oscar Alfa Zulu Uniform"},
{"id":3,"hour":14,"task":"Kilo November Juliett X-ray Lima Uniform Whiskey India Oscar Mike Echo Sierra Romeo Hotel Foxtrot","location":"Quebec Alfa Zulu Charlie Uniform Mike Lima November Tango Golf Hotel Whiskey Oscar Echo"},
{"id":4,"hour":18,"task":"Lima Papa Sierra Alfa Hotel Romeo Delta Uniform Echo Foxtrot November X-ray","location":"Foxtrot India Lima Whiskey November Delta Uniform Mike Oscar Victor Yankee Juliett X-ray Golf Hotel Tango Alfa Romeo Charlie"}]

我有一个 table 包含 ReactJS 组件中一天中的时间。我设法在单元格中导入了一些数据，但我试图在 Json 文件中指定的一天中的特定时间影响数据。

如果我在 Json 的 "hour":8 处得到一些东西，我希望它显示在 table

的 8h-9h 单元格下方

这是我的 Table :

import Mockup from '../data/MOCK_DATA.json';

const DailyTable = () => {
     return(
        <table id="simple-board">

        
            <tbody id='tbody'>
            <tr>
                <td id='head' colspan='24'>Planning journalier du {date}</td>
            </tr>
                <tr id="collapse">
                    <td id="cell">0h-1h</td>
                    <td id="cell">1h-2h</td>
                    <td id="cell">2h-3h</td>
                    <td id="cell">3h-4h</td>
                    <td id="cell">4h-5h</td>
                    <td id="cell">5h-6h</td>
                    <td id="cell">6h-7h</td>
                    <td id="cell">7h-8h</td>
                    <td id="cell">8h-9h</td>
                    <td id="cell">9h-10h</td>
                    <td id="cell">10h-11h</td>
                    <td id="cell">11h-12h</td>
                </tr>
                <tr>
                    <td id="cell2">
                        {Mockup.map((timex, prootex)=>{
                            return( <h1>{timex.hour}</h1>)
                        })}
                    </td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>

                </tr>
                <tr id='collapse'>
                    <td id="cell">12h-13h</td>
                    <td id="cell">13h-14h</td>
                    <td id="cell">14h-15h</td>
                    <td id="cell">15h-16h</td>
                    <td id="cell">16h-17h</td>
                    <td id="cell">17h-18h</td>
                    <td id="cell">18h-19h</td>
                    <td id="cell">19h-20h</td>
                    <td id="cell">20h-21h</td>
                    <td id="cell">21h-22h</td>
                    <td id="cell">22h-23h</td>
                    <td id="cell">23h-00h</td>
                </tr>
                <tr>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                    <td id="cell2"></td>
                </tr>
            </tbody>
        
      </table>
    )
}

估计跟单元格的id有关系。比如如果Json中的'hour'等于单元格的id，那么打印单元格中的数据。

非常感谢您的帮助。

谢谢大家抽出时间:)

Answer 1

在 <tr> 之前使用 map 函数，以便在每个数组索引上重复您的行。并使用与标题中相同的数字 <td>。这样所有数据都将在右栏中可见

像这样：-

<Table bordered hover responsive>
              <thead>
                <tr>
                  <th>S. No</th>
                  <th>Name</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                {userData.map((ele, index) => {
                  return (
                    <tr key={index}>
                      <td>
                        {pageData?.perPage * (pageData?.page - 1) +
                          index +
                          1}
                      </td>
                     
                      <td>{ele?.name}</td>
                      <td>{ele?.email}</td>
                    </tr>
                  );
                })}
              </tbody>

Answer 2

这里有你想要的完整示例，你应该避免重复代码，所以我写了一些代码来生成时间和任务。

const Mockup = [
  {
    id: 1,
    hour: 15,
    task: "Hotel Whiskey Charlie Yankee Quebec Uniform Mike Alfa Kilo Papa",
    location:
      "Tango Victor Mike Papa Kilo Delta Sierra Oscar Echo Alfa Zulu Quebec"
  },
  {
    id: 2,
    hour: 23,
    task:
      "Victor Tango Echo November Juliett Yankee Romeo Quebec Hotel Lima Zulu Delta",
    location:
      "Romeo Golf Kilo Echo X-ray Hotel Foxtrot Bravo India Quebec Charlie Mike Papa Lima Juliett Oscar Alfa Zulu Uniform"
  },
  {
    id: 3,
    hour: 14,
    task:
      "Kilo November Juliett X-ray Lima Uniform Whiskey India Oscar Mike Echo Sierra Romeo Hotel Foxtrot",
    location:
      "Quebec Alfa Zulu Charlie Uniform Mike Lima November Tango Golf Hotel Whiskey Oscar Echo"
  },
  {
    id: 4,
    hour: 18,
    task:
      "Lima Papa Sierra Alfa Hotel Romeo Delta Uniform Echo Foxtrot November X-ray",
    location:
      "Foxtrot India Lima Whiskey November Delta Uniform Mike Oscar Victor Yankee Juliett X-ray Golf Hotel Tango Alfa Romeo Charlie"
  }
];
const PrepareAppointment = ({ from, to }) => {
  const task = Mockup.find((f) => f.hour >= from && f.hour < to);
  return task ? (
    <span>
      <p>
        <span>task:</span>
        {task.task}
      </p>
      <p>
        <span>location:</span>
        {task.location}
      </p>
    </span>
  ) : (
    <span></span>
  );
};

function DailyTable () {
  const list = [];
  for (let i = 0; i < 24; i++) {
    list.push(
      <td>
        <div className="hour">
          {i}h-{i + 1}h
        </div>
        <div className="task">
          <PrepareAppointment from={i} to={i + 1} />
        </div>
      </td>
    );
  }

  return (
    <div className="App">
      <table id="simple-board">
        <tbody id="tbody">
          <tr>
            <td id="head" colspan="24">
              Planning journalier du Date
            </td>
          </tr>
          <tr>
            {list.map((m) => (
              <span>{m}</span>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}


ReactDOM.render( <DailyTable/> ,
  document.getElementById("root")
);

.App {
  font-family: sans-serif;
  text-align: center;
}
.simple-board {
  display: flex;
}
tr td {
  border: solid 1px #aaa;
  border-radius: 4px;
  padding: 1em;
}
p span {
  font-weight: bold;
}
.hour {
  font-weight: bold;
}
.task {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

好的，先更正一些。在 ReactJS 中，“colspan”应更改为“colSpan”（大写 S）。其次，您为“Planning journaier du {date}”header 指定了 24 的 colSpan，但是您有 2 行，每行 12 个单元格。您必须决定是要 1 行有 24 个单元格，还是需要 2 行有 12 个单元格。现在，这是我的解决方案。我假设你有 2 行，每行 12 个单元格。该示例适用于 0-12 小时，您可以轻松扩展它以包含 12-24 小时：

   const hours = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

return (
    <table id="simple-board">
      <tbody id="tbody">
        <tr>
          <td id="head" colSpan="12">
            Planning journalier du {date}
          </td>
        </tr>
        <tr id="collapse">
          <td id="cell">0h-1h</td>
          <td id="cell">1h-2h</td>
          <td id="cell">2h-3h</td>
          <td id="cell">3h-4h</td>
          <td id="cell">4h-5h</td>
          <td id="cell">5h-6h</td>
          <td id="cell">6h-7h</td>
          <td id="cell">7h-8h</td>
          <td id="cell">8h-9h</td>
          <td id="cell">9h-10h</td>
          <td id="cell">10h-11h</td>
          <td id="cell">11h-12h</td>
        </tr>
        <tr>
          {hours.map((h) => (
            <td key={h} id="cell2">
              {
                Mockup.filter(m => {return m.hour===h}).map(m => m.task).toString()
              }
            </td>
          ))}
        </tr>
      </tbody>
    </table>
  );

基本上你循环遍历小时，过滤掉这一小时发生的任务，然后获取这些任务的任务描述并将其显示为字符串：例如任务描述 1，任务描述 2

在 ReactJS 中 table 的特定单元格中显示 Json 数据

Display Json data in specific cells of a table in ReactJS

import

json

calendar

html-table

reactjs