Задача: вывод значений из json файла и отображение элементов в разметке на странице.
Как в дальнейшем работать с временем можно почитать в статье — как конвертировать строки в секунды.
// Пример куска json файла для понимания структуры
{
"zone1": [
{
"00:00": "true",
"00:15": "true",
"00:30": "true",
"00:45": "true"
},
{
"01:00": "false",
"01:15": "true",
"01:30": "false",
"01:45": "true"
}
]
}
Функция обработки данных:
function readTextFile (file, callback) { // получение файла json
const rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
readTextFile("workTime.json", function workTime (text){ // запускам получение данных из json
const data = JSON.parse(text);
processing (data);
});
const valueTime = []; // нам нужен для сортировки данных файла (можно и без него)
function processing (data) { // запускаем функцию с данными из json
for(let key in data) {
for(let i = 0; i < data[key].length; i++) {
for(let property in data[key][i]) { // доходим до каждого нужного нам значеия
if (data[key][i][property] == 'true') { // в нашем случае нужны были данные со значением true
let spanVal = property;
valueTime.push(spanVal); // если подходит под условия добавляем в масив
}
}
}
}
let reverse = valueTime.reverse(); // сортируем данные масива (можно убрать если не нужно)
for (let i = 0; i < reverse.length; i++){
let spanVal = reverse[i];
let add = document.getElementById('timeValSpan'); // получаем нужный нам блок для вставки
add.insertAdjacentHTML('afterbegin', `<span data-time="${spanVal}" class="spanFree">${spanVal}</span>`);// добавляем span элементы на страницу
}
}
Результат работы:
