在 ReactJS 表格的特定单元格中显示 Json 数据答案

【问题标题】：Display Json data in specific cells of a table in ReactJS在 ReactJS 表格的特定单元格中显示 Json 数据
【发布时间】：2021-11-27 08:10:01
【问题描述】：

（我在编程方面非常起步）我有一个包含样机数据的 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"}]

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

如果我在 Json 中的 "hour":8 得到一些东西，我希望它显示在表格的 8h-9h 单元格下方

这是我的桌子：

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 中的“小时”等于单元格的 id，则打印单元格中的数据。

我们将不胜感激。

谢谢你们的时间:)

【问题讨论】：

到底是什么问题？您在代码中显示了 Json 数据！
嗨@Ahmad，问题是我希望数据显示在正确的位置。例如，如果 Json 文件告诉我上午 8 点有约会（“小时”：8），我希望它显示在表格的相应单元格中

标签： reactjs json import html-table calendar

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

好的，首先进行一些更正。在 ReactJS 中“colspan”应该改为“colSpan”（大写 S）。其次，您为“Planning journalier du {date}”标题指定了 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

【讨论】：

【解决方案3】：

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

【讨论】：

感谢@swapnil 的回答，我确实按照你的建议使用了地图功能，但我太菜鸟了，无法理解你的代码，我不知道你在我的@ 中放了什么987654324@。我有我的let hourz= hours.map((hour) => {return(<td key={hour} className="wesh-hour">{hour}</td>)}); 和我的<tr>{hourz}</tr>，但我正在努力将正确的数据放入正确的<td> 我现在所能做的就是将所有数据放在同一个单元格中。
查看编辑后的答案