Господа, прошу помощи, ибо никак не могу организовать логику скрипта, который находил бы нужные объекты и вставлял их в разметку. Подробности ниже.
Есть таблица календаря, которая генерится а js, есть массив объектов, каждый объект хранит в себе информацию о годе+месяце (year
), дне месяца (day
), событии (event
), остальные параметры не так важны. Нужен скрипт, который будет пробегать по массиву, сверять месяц+год календаря с месяцем+годом в объектах, если все совпадает, то далее пробегать по таблице и сверять день календаря с днями в объектах, если совпадает, то в ячейку с совпадающей датой добавлять div
с event
, хранящимся в объекте.
Сейчас происходит почти то что нужно, НО если в массиве есть несколько объектов с совпадающими day
объекта и днем календаря, то в ячейку с датой добавляется ТОЛЬКО первый объект, остальные игнорируются.
Вот так это выглядит сейчас:
let arr = [{
dateEvent: "Первый тест",
day: "11",
description: "Первый тест",
event: "Первый тест",
names: "Первый тест",
year: "Октябрь 2017"
},
{
dateEvent: "Второй тест",
day: "11",
description: "Первый тест",
event: "Первый тест",
names: "Первый тест",
year: "Октябрь 2017"
},
{
dateEvent: "Третий тест",
day: "11",
description: "Первый тест",
event: "Первый тест",
names: "Первый тест",
year: "Октябрь 2017"
},
{
dateEvent: "Четвертый тест",
day: "10",
description: "Первый тест",
event: "Первый тест",
names: "Первый тест",
year: "Октябрь 2017"
},
]
const showAllEvents = () => {
let arrEvents = arr,
list = document.getElementById("organizer").getElementsByTagName('td');
//берем первый день - внешний цикл
for (let j = 0; j < list.length; j++) {
//первый объект в массиве - внутренний цикл
for (let i = 0; i < arrEvents.length; i++) {
//проверяем соответсвие месяца и года с данными в объекте
if (document.getElementById('year').innerHTML === arrEvents[i].year) {
//проверяем день календаря и день объекта
if (list[j].innerHTML === arrEvents[i].day) {
//тут слайсится Событие
let text = arrEvents[i].event,
slicedEvent = text.slice(0, 15);
if (slicedEvent.length < text.length) {
slicedEvent += '...';
}
//создаем див, в него вставляем дивы с данными, которые должны хранится в ячейке
let appendDiv = document.createElement('div');
appendDiv.className = 'event-div';
appendDiv.innerHTML = `
<div class="event">` + slicedEvent + `</div>
<div class="day-event" style="display: none">` + arrEvents[i].day + `</div>
<div class="year-event" style="display: none">` + arrEvents[i].year + `</div>
<div class="date-event" style="display: none">` + arrEvents[i].dateEvent + `</div>
<div class="names-event" style="display: none">` + arrEvents[i].names + `</div>
<div class="description-event" style="display: none">` + arrEvents[i].description + `</div>
`;
//вставляем этот див в текущую ячейку
document.getElementsByTagName('td')[j].appendChild(appendDiv);
}
//как я понимаю, внутренний цикл должен повториться и перейти ко второму объекту,
//но почему-то вместо этого сразу начинается новая итерация внешнего цикла
}
}
}
};
showAllEvents();
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 333;
}
#calendar {
width: 80%;
height: 90%;
margin: 0 auto;
}
#control-month span:first-child,
#control-month span:last-child {
cursor: pointer;
}
#control-month div {
cursor: pointer;
}
#organizer {
border-collapse: collapse;
width: 100%;
font-family: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
word-break: break-all;
table-layout: fixed;
}
#organizer thead {
color: rgb(50, 50, 50);
font-size: 10px;
}
#organizer tbody tr {
height: 80px;
}
#organizer tbody td {
position: relative;
color: rgb(44, 86, 122);
font-size: 10px;
vertical-align: top;
cursor: pointer;
border: 1px solid dimgrey;
z-index: 33;
}
#organizer tbody td:nth-child(n+6),
#organizer .holiday {
color: rgb(231, 140, 92);
}
#organizer tbody td.today {
background: rgb(220, 0, 0);
color: #fff;
}
#cover-div {
width: 15%;
height: 25%;
position: absolute;
background: lightsteelblue;
border: 1px solid darkgray;
}
#cover-div input,
#cover-div textarea {
box-sizing: border-box;
}
#overlay-div {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="calendar">
<div id="control-month">
<span>‹</span>
<span id="year">Октябрь 2017</span>
<span>›</span>
<div>Сегодня</div>
</div>
<table id="organizer">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td data-container="container-event">1</td>
</tr>
<tr>
<td data-container="container-event">2</td>
<td data-container="container-event">3</td>
<td data-container="container-event">4</td>
<td data-container="container-event">5</td>
<td data-container="container-event">6</td>
<td data-container="container-event">7</td>
<td data-container="container-event">8</td>
</tr>
<tr>
<td data-container="container-event">9</td>
<td data-container="container-event">10</td>
<td class="today" data-container="container-event">11</td>
<td data-container="container-event">12</td>
<td data-container="container-event">13</td>
<td data-container="container-event">14</td>
<td data-container="container-event">15</td>
</tr>
<tr>
<td data-container="container-event">16</td>
<td data-container="container-event">17</td>
<td data-container="container-event">18</td>
<td data-container="container-event">19</td>
<td data-container="container-event">20</td>
<td data-container="container-event">21</td>
<td data-container="container-event">22</td>
</tr>
<tr>
<td data-container="container-event">23</td>
<td data-container="container-event">24</td>
<td data-container="container-event">25</td>
<td data-container="container-event">26</td>
<td data-container="container-event">27</td>
<td data-container="container-event">28</td>
<td data-container="container-event">29</td>
</tr>
<tr>
<td data-container="container-event">30</td>
<td data-container="container-event">31</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
Прошу сильно ссаными тряпками не кидаться, а объяснить что происходит, кажется я не совсем верно понимаю работу циклов. Или же в логике ошибка?