Menu Zamknij

Перебор Json файла и вывод значений на странице js

Задача: вывод значений из 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(&#039;afterbegin&#039;, `<span data-time="${spanVal}" class="spanFree">${spanVal}</span>`);// добавляем span элементы на страницу
    }
}
				
			

Результат работы:

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

>