(I'm very beggining in programation) I have a Json file containing mockup data looking like so :
[{"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"}]
And I have a table containing the hours of the day in a ReactJS component. I managed to import some data in a cell but I'm trying to affect the data at the specific hour of the day specified in the Json file.
Like if I get something at "hour":8 in my Json I want it displayed just under the 8h-9h cell of my table
Here is my 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>
)
}
I guess it has something to do with the id of the cells. Like if the 'hour' in the Json is equal to the id of the cell, then print the data in the cell.
Some help would really be appreciated.
Thanks for your time guys :)
CodePudding user response：
Here are a full sample for what you want, you should avoid repeated code, so I write some codes to generate hours and tasks.
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>CodePudding user response：
OK first some corrections. "colspan" should be changed to "colSpan" (capital S) in ReactJS. Second, you specify a colSpan of 24 for your "Planning journalier du {date}" header, but then you have 2 rows of 12 cells each. You have to decide whether you want 1 row with 24 cells, or 2 rows with 12 cells. Now, here is my solution. I have assumed you have 2 rows, 12 cells each. The example is for the hours 0-12, you can easily expand it to include the hours 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>
);
Essentially you loop through the hours, filter out the tasks that take place on this hour, then take the task description of these tasks and display it as a string: e.g. task description 1, task description 2
CodePudding user response：
use map function before the <tr> so that your row is repeated on each array index. and use the same number <td> as you have in the heading. so that all data will be visible in right column
like this:-
<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>