Используя Google таблицу и переведя её в формат JSON, вывести расписание занятий групп института.

@AleksGor22 · Регистрация: 21.01.2020

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Делаю работу по учебе.
Нужна помощь.

Задача была в создании расширения для гугла, которое выводит расписание занятий групп института.
Решил делать, используя google таблицу и переводя её в формат json, а затем вытягивая нужные данные из него.

Вот код js файла:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function(){
  $.getJSON(
    "https://spreadsheets.google.com/feeds/list/1geYLclwDE1s0b3dg6KZVbNOGnRflIkvKSFaARgnCLBQ/od6/public/values?alt=json",
    function(data) {
      data = data['feed']['entry'];
      console.log(data);
      search_group(data);
  });
 
 
  function search_group(data){
    var out_select;
    var out_date;
    var result = [];
    for(var i=0; i < data.length; i++){
      if(data[i]['gsx$group']['$t'].length > 0){
        if(!result.includes(data[i]['gsx$group']['$t'])){
          result.push(data[i]['gsx$group']['$t']);
          out_select += '<option class="group_num">' + data[i]['gsx$group']['$t'] + '</option>';
          }
          
        }
    }
    $("#studentGroup").html(out_select);
  }
})

Вот код html файла:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Расписание занятий</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="popup.js"></script>
    <link rel="stylesheet" type="text/css" href="popup.css" media="screen" />
</head>
 
<body>
    <table style="width: 100%" id="pageTable">
        <tr>
            <td>
                <div>
                  <img src="pgu128.png" id="pageLogo" style="vertical-align:middle">
                  <span style="font-size: 18px">Расписание</span>
                </div>
            </td>
            <td style="text-align: right">
                <select id="studentGroup">
                      
                </select>
 
                <input type="date" id="scheduleDate" value="">
 
            </td>
        </tr>
    </table>
 
    <div id="result">
        <p></p>
    </div>
</body>
 
</html>

У меня не получается разобраться как мне связать календарь

HTML5
1
  <input type="date" id="scheduleDate" value="">

с json данными, чтобы при выборе группы и даты выводились предметы, вероятно я вообще не в том направлении работаю, так как опыта совсем нет в таких делах.

На скринах сама таблица, расширение и данные json.

Используя Google таблицу и переведя её в формат JSON, вывести расписание занятий групп института.

Может кто разбирается в этой теме, буду очень благодарен за помощь.

@fixeri · 22.01.2020, 12:24

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Расписание занятий</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <!-- <script src="popup.js"></script> -->
    <!-- <link rel="stylesheet" type="text/css" href="popup.css" media="screen" /> -->
</head>
 
<body>
    <table style="width: 100%" id="pageTable">
        <tr>
            <td>
                <div>
                  <img src="pgu128.png" id="pageLogo" style="vertical-align:middle">
                  <span style="font-size: 18px">Расписание</span>
                </div>
            </td>
            <td style="text-align: right">
                <select id="studentGroup">
                    <option>Loading....</option>
                </select>
 
                <input type="date" id="scheduleDate" value="">
            </td>
        </tr>
    </table>
 
    <div id="result">
        
    </div>
</body>
 
 
<script type="text/javascript">
    "use strict";
 
    $(document).ready(function() {
        let date = new Date();
        let today = [date.getFullYear(), `${date.getMonth()+1}`.padStart(2, '0'), date.getDate()];
        let dataJSON;
        $("#scheduleDate").val(today.join("-")); // Устанавливаем сегоднюшнюю дату.
        $.getJSON("https://spreadsheets.google.com/feeds/list/1geYLclwDE1s0b3dg6KZVbNOGnRflIkvKSFaARgnCLBQ/od6/public/values?alt=json", function(data) {
            dataJSON = data['feed']['entry'];
            search_group(dataJSON);
            viewSorted();
        });
        $("#scheduleDate").on("change", viewSorted);
        $("#studentGroup").on("change", viewSorted);
 
        function viewSorted() {
            let curDate = $("#scheduleDate").val().split("-").reverse().join(".");
            let curGroup = $("#studentGroup").val();
            let filtered = dataJSON.filter(e => e[`gsx$date`][`$t`] === curDate && e[`gsx$group`][`$t`] === curGroup)[0];
            if (!filtered) {
                $("#result").html("Не найдено.");
                return false;
            }
            let paras = "";
            for (let i = 1; i <= 6; i++) {
                paras += "<p>" + i + " " + filtered[`gsx$para${i}`][`$t`] + "</p>";
            }
 
            $("#result").html(`
                <p>Date: ${filtered[`gsx$date`][`$t`]}</p>
                <p>Group: ${filtered[`gsx$group`][`$t`]}</p>
                <p>Paras: ${paras}</p>
            `);
        }
 
        function search_group(data) {
            var out_select = "";
            var result = [];
            for (var i = 0; i < data.length; i++) {
                if (data[i][`gsx$group`][`$t`].length > 0) {
                    if (!result.includes(data[i][`gsx$group`][`$t`])) {
                        result.push(data[i][`gsx$group`][`$t`]);
                        out_select += '<option class="group_num">' + data[i][`gsx$group`][`$t`] + '</option>';
                    }
                }
            }
            $("#studentGroup").html(out_select);
        }
    });
</script>
 
</html>

@AleksGor22 · 23.01.2020, 16:04 **[ТС]**

Спасибо огромное!
Если не сложно, можете подробнее написать что происходит в функции viewSorted?

@AleksGor22 · 24.01.2020, 16:06 **[ТС]**

fixeri, можете расписать что в функции происходит? Спасибо!

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@AleksGor22 0 / 0 / 0 Регистрация: 21.01.2020 Сообщений: 15
	23.01.2020, 16:04 [ТС]
	Спасибо огромное! Если не сложно, можете подробнее написать что происходит в функции viewSorted? 0

@AleksGor22 0 / 0 / 0 Регистрация: 21.01.2020 Сообщений: 15
	24.01.2020, 16:06 [ТС]
	fixeri, можете расписать что в функции происходит? Спасибо! 0

Используя Google таблицу и переведя её в формат JSON, вывести расписание занятий групп института.

Решение