#javascript #reactjs #typescript
Вопрос:
Идея, лежащая в основе этого кода, заключается в некотором личном размышлении о некоторой функции, которая может быть полезна для всех участников, чтобы иметь подробную информацию.
const schoolTimings = [
{
schoolType: 'Primary School',
list: [
{
school: 'ABC',
day: 'Monday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Tuesday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Thursday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Friday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Saturday',
open: '08:00',
close: '12:30'
},
{
school: 'XYZ',
day: 'Monday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Tuesday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Wednesday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Thursday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Friday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Saturday',
open: '08:00',
close: '12:00'
}
]
},
{
schoolType: 'Secondary School',
list: [
{
school: 'PQR',
day: 'Monday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Tuesday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Wednesday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Thursday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Friday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Saturday',
open: '08:00',
close: '15:30'
},
{
school: 'XYZ',
day: 'Monday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Tuesday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Wednesday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Thursday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Friday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Saturday',
open: '08:00',
close: '17:00'
}
]
}
];
Все предоставленные данные являются вымышленными , а не точными данными .
Я пытаюсь это сделать в течение последнего 1 месяца , но не могу получить результат,
нужно в reactjs с js или машинописным текстом в формате, указанном на рисунке (для справки) 
Пожалуйста, поделитесь ответом, если вы знаете решение, спасибо всему помогающему сообществу.
Комментарии:
1. Пожалуйста, поделитесь тем, что вы пробовали до сих пор, и объясните, с какими проблемами вы сталкиваетесь
Ответ №1:
Этот код работает для того, о чем вы просите:
import React from 'react';
const Tab = () => {
const schoolTimings = [
{
schoolType: 'Primary School',
list: [
{
school: 'ABC',
day: 'Monday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Tuesday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Thursday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Friday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Saturday',
open: '08:00',
close: '12:30'
},
{
school: 'XYZ',
day: 'Monday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Tuesday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Wednesday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Thursday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Friday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Saturday',
open: '08:00',
close: '12:00'
}
]
},
{
schoolType: 'Secondary School',
list: [
{
school: 'PQR',
day: 'Monday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Tuesday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Wednesday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Thursday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Friday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Saturday',
open: '08:00',
close: '15:30'
},
{
school: 'XYZ',
day: 'Monday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Tuesday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Wednesday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Thursday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Friday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Saturday',
open: '08:00',
close: '17:00'
}
]
}
];
let table2 = <></>
for (let i = 0; i < schoolTimings.length; i ) {
table2 = <>{table2}
<tbody>
<tr>
<td colSpan="15" style={{color: "blue", fontWeight: "bold"}}> {schoolTimings[i].schoolType} </td>
</tr>
</tbody>
</>;
let listSchool = []
for (let j = 0; j < schoolTimings[i].list.length; j ) {
if (listSchool.indexOf(schoolTimings[i].list[j].school) === -1) {
listSchool.push(schoolTimings[i].list[j].school)
}
}
for (let k = 0; k < listSchool.length; k ) {
let listValueSchool = {
School: listSchool[k],
Monday: {
open: '',
close: ''
},
Tuesday: {
open: '',
close: ''
}, Wednesday: {
open: '',
close: ''
}, Thursday: {
open: '',
close: ''
}, Friday: {
open: '',
close: ''
}, Saturday: {
open: '',
close: ''
}, Sunday: {
open: '',
close: ''
},
}
for (let j = 0; j < schoolTimings[i].list.length; j ) {
if (schoolTimings[i].list[j].school === listSchool[k]) {
switch (schoolTimings[i].list[j].day) {
case 'Monday':
listValueSchool.Monday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Tuesday':
listValueSchool.Tuesday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Wednesday':
listValueSchool.Wednesday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Thursday':
listValueSchool.Thursday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Friday':
listValueSchool.Friday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Saturday':
listValueSchool.Saturday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Sunday':
listValueSchool.Sunday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
default:
break;
}
}
}
table2 = <>{table2}
<tbody>
<tr>
<td>{listValueSchool.School}</td>
<td>{listValueSchool.Sunday.open}</td>
<td>{listValueSchool.Sunday.close}</td>
<td>{listValueSchool.Monday.open}</td>
<td>{listValueSchool.Monday.close}</td>
<td>{listValueSchool.Tuesday.open}</td>
<td>{listValueSchool.Tuesday.close}</td>
<td>{listValueSchool.Wednesday.open}</td>
<td>{listValueSchool.Wednesday.close}</td>
<td>{listValueSchool.Thursday.open}</td>
<td>{listValueSchool.Thursday.close}</td>
<td>{listValueSchool.Friday.open}</td>
<td>{listValueSchool.Friday.close}</td>
<td>{listValueSchool.Saturday.open}</td>
<td>{listValueSchool.Saturday.close}</td>
</tr>
</tbody>
</>;
}
}
return (
<table>
<thead>
<tr>
<th colSpan="1" style={{color: "purple"}}>Day</th>
<th colSpan="2" style={{color: "purple"}}>Sunday</th>
<th colSpan="2" style={{color: "purple"}}>Monday</th>
<th colSpan="2" style={{color: "purple"}}>Tuesday</th>
<th colSpan="2" style={{color: "purple"}}>Wednesday</th>
<th colSpan="2" style={{color: "purple"}}>Thursday</th>
<th colSpan="2" style={{color: "purple"}}>Friday</th>
<th colSpan="2" style={{color: "purple"}}>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td colSpan="1">School</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
</tr>
</tbody>
{table2}
</table>
);
}
export default Tab; Комментарии:
1. Большое спасибо Лукасу , это помогает мне сохранять некоторые данные моих друзей по возрасту и делиться ими, если это полезно для сообщества, если конечный продукт хорош и работает так, как я хотел .