Используя forEach написать код, который используя ответ Оцени работу преподавателя по шкале от 1-10 / 10 – высоко оцениваю работу преподавателя. 1 – совсем не понравилась работа преподавателя будет выдавать что-то вроде
Причем написать тремя разными способами
Добавить выпадающие списки с уникальными значениями для ключей
Отметь, в какой мере ты удовлетворен курсом?Насколько доволен форматом обучения?и сверстать чтобы они вверху в ряд стояли, как-то так:
Как располагать элементы формы можно подсмотреть тут https://getbootstrap.com/docs/5.3/forms/layout/
Реализовать возможность фильтровать по оставшимся выпадающим спискам.
Причем фильтры по спискам должны объединятся.
Как-то так должно работать:
Доработать приложение, выдавать статистику по каждому из столбиков
Построить графики по статистике на каждую категорию, как-то так:
Качай сконвертированный файлик: 470_data.json
Теперь создадай папку под проект и запихай в нее этот сконвертированный файлик, которые содержит отзывы о курсе =)
Не забудь его переименовать в data.json чтобы получилось как у меня, вот так:
создадим теперь болванку index.html, сразу в нее бутстрап подключим
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
Так как мы будем писать много js-кода, чтобы он не мешался, закинем его в отдельный файл.
Создадим файлик main.js. Получится вот так:
теперь подключим main.js к нашему index.html
Проверим что он действительно подключился.
Загоним в main.js какой-нибудь простой код, например:
и запустим liverserver щелкнув на index.html правой кнопкой
если видим что-то такое значит все работает =О
И так, теперь давай пробовать работать с данными.
В браузере нет возможности прочитать файл напрямую. И это даже несмотря на то что наш файлик с данными лежит в папке рядом с нашим index.html, мы не можем его открыть
но мы можем его скачать =О
Да-да. То есть открыть нельзя, а скачать можно =)
Но качать мы его естественно не руками, а через js. Почему?
А затем, чтобы мы могли как-нибудь манипулировать его данными.
Так как файл в формате json, то javascript автоматом преобразует его в переменную.
В общем, меньше слов, больше дела. Качаем файл. Пишем в main.js:
// main.js
// создадим функцию обертку под наш код
// тут странное слово async,
// но это короче, чтобы мы могли выполнять асинхронный код
// ну то есть делать запросы и ждать ответа от сервера
async function process() {
// отправляем запрос на скачивание файла /data.json
// наличие слеша перед data.json вообще в данном случае не обязательно
// но считается хорошей практикой
// await означает типа: жди ответа на запроса
let r = await fetch("/data.json");
// когда ответ на запрос придет,
// то его значение положится
// в переменную r
// так как в ответе на запрос помимо самих данных
// есть еще всякая информация, то надо еще
// преобразовать ответ в объект js
// для этого используется r.json()
let data = await r.json();
// после того как этот запросы выполнится
// в data будет содержимое файла в виде словарика
// выведем его в консоль
console.log(data);
}
// запускаем функцию
process();
глянем что происходи в консольке:
это тот самый data
если понажимать на эту штуку, то можно посмотреть содержимое
Кстати, так как мы делаем запрос. То можно проверить был ли действительно сделан запрос. Для этого можно сходить в консольку во вкладку Network, выбрать там Fetch/XHR, перегрузить страницу, и тыкнуть на имя файл, еще можно на Preview чтобы увидеть содержимое запроса.
Тут отразятся вся fetch запросы которые делались скриптами на этой странице.
У меня тут еще есть какой-то config.js… но это какое-то расширение, чего-то там делает, так что можно его игнорить.
Вернемся к скрипту. Я вот там мильон комментов написал, но по сути он же совсем не страшный и выглядит вот так:
// main.js
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
console.log(data);
}
process();
При работе с данными абсолютно на любому языке программирования надо освоить две главных функции, это filter и map. Это так называемые элементы функционального программирования.
Функциональное программирование – это типа про функции, но хитрее. В нем, короче, одни функции передаются в другие функции и там всякие непотребства творятся. В общем ужас-ужас, но народу нравится.
Но чтобы было проще их понять начнем с другой функции, которая называется forEach
Как можно догадаться по названию, эта функция “что-то должна делать для каждого”.
А вот чего не понятно?
Попробуем вывести один отзыв из нашего файлика,
// main.js
async function process() {
// это не трогам
let r = await fetch("/data.json");
let data = await r.json();
// взял первый отзыв
let item = data[0];
// вывел в консоль
console.log(first);
}
process()
получим такое
попробуем теперь вывести какой-нибудь конкретный ответ в этом отзыве. Например, на предмет полезности курса. Получится вот так:
глянем что выведет:
ну вроде нормально работает)
Допустим я теперь хочу проверить значение по этому ключу, и как-то на него среагировать
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
let item = data[0];
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
}
в консольке все корректно.
А теперь допустим я хочу, чтобы он каждый элемент списка проверил поэтому же условию. В принципе я могу написать так:
async function process() {
// ... скачивание не трогаем
let item = data[0];
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
item = data[1]; // тут let уже не нужен, так переменную объявляли выше
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
item = data[2];
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
// ...
// и так пока не кончится, но я хз сколько их там этих значений, вдруг стотыщ =О
}
Но можно же это написать с помощью цикла:
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
for (item of data) {
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
}
}
И мы будем правы, оно же работает, и прекрасно.
Что-то такое выведет
Но нам то надо функциональщину, чтобы всякие хитрости с данными делать.
Так что для того чтобы нам жизнь сахаром не казалось, «special for you», как говорится, человечество придумало forEach.
ForEach – это функция, которой передается другая функцию и вот она эту функцию выполняет по одному разу для каждого элементов массива.
По сути тот же цикл. Но пишется вот так
data.forEach(item => {
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
})
если сравнить с методом через цикл:
Вроде похоже.
Но что же тут на самом деле происходит
data.forEach – это вызов функции forEach у массива datadata.forEach(item => { ... }) – вот это вот item => { ... }, по сути передача функции в качества параметра функции forEachitem => { ... } – это так называемся анонимная функция, то есть у нее есть параметр item, есть тело (это как раз то что включается в себя if (item['Насколько материал курса был понятен?'] == "...") ...Эту штуку еще можно было так написать
function processItem(item) {
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
}
data.forEach(processItem)
возможно так будет понятнее.
Короче в итоге все должно выглядеть вот так:
// main.js
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
data.forEach(item => {
if (item['Насколько материал курса был понятен?'] == "В основном") {
console.log("Говорит что в основном понравился")
}
})
}
process()
Попробуй теперь сделать задание
Ну вот мы вроде с forEach более-менее разобрались. Теперь пойдем мучать map
Начнем с нуля. То есть пусть у нас опять просто index.html вида:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="/main.js"></script>
</body>
</html>
и файлик main.js вида
// main.js
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
}
process()
еще у меня есть файлик с данными data.json в нем список словариков вида
{
"ID": "1385327090",
"Отметь, в какой мере ты удовлетворен курсом?": "В основном",
"Насколько курс был интересен?": "Интересный",
"Насколько курс был полезен?": "Полезный",
"Насколько материал курса был понятен?": "В основном",
"Насколько доволен форматом обучения?": "В основном",
"Оцени работу преподавателя по шкале от 1-10 / 10 – высоко оцениваю работу преподавателя. 1 – совсем не понравилась работа преподавателя": "8"
},
я хочу из этого списка получить, например, набор всевозможных ответов по ключу Насколько курс был полезен?
и тут нам приходит на помощь функция map
map – переводится как отображение, либо как карта, что в принципе есть упрощённое отображение реальной местности на картинку. Помнишь там всякие масштабы, география, все дела…
В общем с помощью этой функции я хочу упростить исходный список словариков и превратить его в список фраз.
Попробуем сначала воспользоваться функций map, которая ничего не меняет.
Пишем
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
console.log(data) // выведем исходный список
let mappedData = data.map(item => {
return item;
}) // мэпю
console.log(mappedData) // выведем отображенный список
}
process()
глянем что получится в консоли:
можно заметить, что он вывел два одинаковых списка словариков.
Давай теперь разберемся что за магия в строчках
let mappedData = data.map(item => {
return item;
})
Если помнишь с прошлого задания то => означает объявление анонимной функции, то что слева от стрелочки – это параметр функции, а то что справа – это то что делает функция.
map работает по тому же принципу что и forEach, то есть он берет каждый элемент списка data, передает его в аргумент функции, а функция делает что?
Делает return item. То есть возвращает значение.
И этот же map собирает эти возвращенные значения обратно, но уже в новый список.
Если пока не понятно. То вот тебе более простой пример
let mappedData = [1,2,3,4].map(item => {
return item
})
что это выдаст? Очевидно [1,2,3,4]
Ну мэп не был бы мэпом, если бы он не давал бы возможность изменить значение.
Мы можем, например, взять и умножить все значения исходного массива на 2, вот так:
let mappedData = [1,2,3,4].map(item => {
return item * 2
})
а можем даже фразу слепить
let mappedData = [1,2,3,4].map(item => {
return `${item} + ${item} = ${item * 2}`
})
так как программисты не любя писать лишний код, то они вот эти штуки любят писать в упрощённом виде.
вместо
let mappedData = [1,2,3,4].map(item => {
return `${item} + ${item} = ${item * 2}`
})
они пишут
let mappedData = [1,2,3,4].map(item => `${item} + ${item} = ${item * 2}`)
вместо
let mappedData = [1,2,3,4].map(item => {
return item * 2
})
пишут
let mappedData = [1,2,3,4].map(item => item * 2)
а вместо
let mappedData = data.map(item => {
return item;
})
пишут
let mappedData = data.map(item => item)
грубо говоря если анонимная функция просто возвращает значение, то ее можно записать в упрощённом виде, без всяких этих ваших return
let mappedData = data.map(item => возвращаемое_значение)
Вернемся к нашему списку
[
...
{
"ID": "1385327090",
"Отметь, в какой мере ты удовлетворен курсом?": "В основном",
"Насколько курс был интересен?": "Интересный",
"Насколько курс был полезен?": "Полезный",
"Насколько материал курса был понятен?": "В основном",
"Насколько доволен форматом обучения?": "В основном",
"Оцени работу преподавателя по шкале от 1-10 / 10 – высоко оцениваю работу преподавателя. 1 – совсем не понравилась работа преподавателя": "8"
},
...
]
Как я уже говорил, я хочу из этого списка получить например набор всевозможных ответов по ключу Насколько курс был полезен?
Таким образом наш код
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
console.log(data) // выведем исходный список
let mappedData = data.map(item => {
return item;
}) // мэпю
console.log(mappedData) // выведем отображенный список
}
process()
можно написать следующим образом
async function process() {
let r = await fetch("/data.json");
let data = await r.json();
console.log(data)
let mappedData = data.map(item => {
return item['Насколько курс был полезен?']; // добавил конкретный ключ
})
console.log(mappedData)
}
process()
глянем что выведется
ого, мы получили 38 значений, и там только значения ключа Насколько курс был полезен?
То, что нам и надо =О
Теперь бы только уникальные получить…
Если у тебя есть список не уникальных значений, то ты можешь сделать из него список только уникальных значений, если воспользуешься небольшим хаком.
В js есть специальный объект которые называется Set.
Set – переводится как множество. Согласно формальной математике, множество не имеет повторяющихся значений.
Поэтому, если ты хочешь из списка оставить только набор уникальных значений, то надо преобразовать список в множество.
Делается это так:
let uniqueValues = new Set(mappedData)
console.log(uniqueValues)
но так как Set это не совсем список, у него, например, нет метода map или forEach, то надо немного схитрить, и множество обратно переделать в список, вот так:
let uniqueValues = [...new Set(mappedData)] // это такой хитрый способ перегнать множество в список
console.log(uniqueValues)
На кой мне эти уникальный значения? – спросишь ты.
Я хочу сделать выпадающий список, который будет содержать список возможных значений по конкретному ключу. И будем потом по ним фильтровать
О как я придумал. Но это потом =О
И так, задача:
Дано: список уникальных значений
Надо: вывести select на форму
идем верстать
Я буду банален, загоню вот такое:
<div class="container mt-2">
<div class="row">
<div class="col">
<select class="form-select" id="selectPoleznost"></select>
</div>
</div>
</div>
теперь я хочу загнать в этот select список возможных значений.
Идем в main.js.
Сначала найдем выпадающий список на форме
let select = document.querySelector("#selectPoleznost");
console.log(select)
кстати если мышкой наводить в консольке, то должен подсвечивать на форме:
теперь заполню список. Для этого нам пригодится уже знакомый нам метод forEach
uniqueValues.forEach(item => {
console.log(item)
})
так как мы хотим не выводить в консоль значение из списка uniqueValues, а создавать по ним элементы, то нам надо в тело анонимной функции загнать:
uniqueValues.forEach(item => {
// создаем в памяти элемент выпадающего списка
let option = document.createElement("option");
option.value = item; // устанавливаем значение элемента
option.text = item; // устанавливаем текст элемента, он совпадает со значением
select.add(option) // добавляем элемент к выпадающему списку
})
можно потестить:
красота =)
Го пилить задание)
Продолжим работу с данными. Сегодня у нас будет функция filter
Суть функции filter заключается в том чтобы взять и отфильтровать данные, то есть взять список и оставить в нем подходящие данные, убрать не подходящие.
Чтобы не ломать код, которые был сделан в прошлом задании, я создам новую функцию в main.js и назову ее processFilter, запихаю в нее стягивание списка данных, вот так:
чтобы не захламлять console.log, убери все вызовы console.log из функции process
То есть при запуске приложения должно быть так
Как и функции forEach и map, функция filter работает по такому же принципе. Передаем ей анонимную функцию и чего-то происходит.
У forEach в анонимной функции может быть что угодно, как правило это какая-та операция. И функция не должна ничего возвращать (хотя в принципе может, но это ни на что влиять не будет)
Например:
data.forEach(item => {
console.log(item);
})
У map анонимная функция обязательно должна вернуть какое-то новое значение, а результат выполнения функции обязательно кладут в переменную. Например:
let newData = data.forEach(item => {
return item['ключик'];
})
Новый список который создает функция map всегда содержит столько же значений сколько и исходный список, можно вспомнить такую картинку
тут в консоли два раза выводятся списки длины 38. В первом случае – исходный, а во втором – список значений по ключу на каждый элемент из исходного списка.
Так вот, функция filter, берет исходный список и оставляет в нем только элементы, удовлетворяющие некоторому условию.
У filter анонимная функция должна вернуть логическое значение (ложь либо истину).
Если значения анонимной функции получается истинное, то элемент попадает в новый список, а если ложное – то не попадает.
Давай чтобы было понятнее, сначала рассмотрим на простом примере. Ну типа вот таком
let filteredData = [1,2,3,4].filter(item => {
return item > 2
})
console.log(filteredData);
что же вернет эта вундервафля:
как видишь, он возвращает элементы, которые большие двух, что собственно в return item > 2 и написано.
Мы можем сделать хитрое условие какое-нибудь
let filteredData = [1,2,3,4].filter(item => {
return item > 1 && item < 4
})
и тут работает. Потрясающе! =О
Кстати смотрим, так как тут у нас анонимная функция, которая просто возвращает значение, это значит, что этот код можно писать короче, вот так:
let filteredData = [1,2,3,4].filter(item => item > 1 && item < 4)
жутковато-то получилось, но в жизни так часто пишут =)
И так вернемся к нашему списку:
[
...
{
"ID": "1385327090",
"Отметь, в какой мере ты удовлетворен курсом?": "В основном",
"Насколько курс был интересен?": "Интересный",
"Насколько курс был полезен?": "Полезный",
"Насколько материал курса был понятен?": "В основном",
"Насколько доволен форматом обучения?": "В основном",
"Оцени работу преподавателя по шкале от 1-10 / 10 – высоко оцениваю работу преподавателя. 1 – совсем не понравилась работа преподавателя": "8"
},
...
]
я хочу запросить список отзывов, в которых отметили для ключа "Насколько курс был полезен?" значение "Полезный"
Как же это сделать? А нет ничего проще, просто пишем:
let filteredData = data.filter(item => item["Насколько курс был полезен?"] == "Полезный")
console.log(filteredData);
проверяем как работает условие
красота! =)
Попробуй поиграться с другими ключами =О
А если чувствуешь себя уверено, то идем дальше
Давай теперь попробуем выводить список на страницу.
Создадим функцию и назовем ее fillList, загоним в нее стандартный код скачивания списка
async function fillList() {
let r = await fetch("/data.json");
let data = await r.json();
console.log(data);
}
в сумме должно так выглядеть
теперь в файлике index.html, создадим таблицу под элементы списка. Я буду использовать табличку https://getbootstrap.com/docs/5.3/components/table/
<div class="container mt-2">
<table class="table" id="elements-container">
<thead>
<tr>
<th>ID</th>
<th>Полезность</th>
<th>Довольность</th>
<th>Удовлетворенность</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
вот так получится
идем обратно в main.js
так как я буду добавлять строки в тело таблицы, мне надо по id таблицы вытащить это самое tbody. Для этого надо написать вот так:
let container = document.querySelector("#elements-container > tbody");
console.log(container)
А теперь надо его заполнить. Заполняем, как и выпадающий список в прошлом задании через forEach.
Мы воспользуемся классным методом insertAdjacentHTML, который позволяет передать текст разметки, а он его возьмет и автоматом вставит в контейнер. Получается такое:
data.forEach(item => {
container.insertAdjacentHTML("beforeend", `
<tr>
<td>${item['ID']}</td>
<td>${item['Насколько курс был полезен?']}</td>
<td>${item['Насколько доволен форматом обучения?']}</td>
<td>${item['Отметь, в какой мере ты удовлетворен курсом?']}</td>
</tr>
`);
})
попробуем теперь пофильтровать выводимые данные.
У нас сейчас выводится весь список, но было бы прикольно если бы мы могли вверху выбрать в выпадающем списке значение, и он бы оставил только те строки, которые соответствуют выбранному вверху значению.
Например, оставить только те строки полезность которых была “Полезной”
Попробуем сначала просто вывести отфильтрованный список. Сделаем это прямо в методе fillList
проверяем
а что если я хочу брать значение с формы. Тогда надо написать так:
проверим как работает:
чего-то не работает… Почему так?
Дело в том, что наша функция fillList срабатывает ровно один раз при запуске приложения. А вот когда мы переключаем значение в списке, то ничего не происходит.
Мы можем добавить обработчик события изменения значения в списке. Для этого добавим функцию onSelectPoleznostChanged
теперь пойдем в index.html и привяжем эту функцию в качестве обработчика события смены значения в списке. Делается это так:
давай теперь добавим какой-нибудь вывод в консоль в функцию onSelectPoleznostChanged
async function onSelectPoleznostChanged() {
console.log("Поменялся")
}
проверим как работает:
а теперь попробуем взять значение из списка
async function onSelectPoleznostChanged() {
let selectPoleznost = document.querySelector("#selectPoleznost")
console.log(selectPoleznost.value)
}
тестируем:
красота! =)
А попробуем-ка вызывать метод fillList() внутри этой функции,
async function onSelectPoleznostChanged() {
let selectPoleznost = document.querySelector("#selectPoleznost")
console.log(selectPoleznost.value)
fillList()
}
проверяем:
ну что-то происходит…
Если присмотреться, то наш список который выводится на странице – растет.
из-за чего это происходит?
Дело в том, что мы в методе fillList всегда добавляем элементы в наш список, и никогда не удаляем
давай добавим перед вызовом forEach() строчку, где будем чистить список:
проверим что получилось:
отлично, все работает! =)
Возможность отфильтровать – это конечно здорово. Но что, если я хочу возможность сбросить фильтр?
Для выпадающего списка это обычно решается путем добавления пункта типа “не важно” или “все”
Идем в index.html и добавляем там:
мы добавили один пункт меню вручную, остальные у нас добавляются, как ты помнишь, динамически
единственная проблема сейчас, этот фильтр не работает:
в принципе это логично, ведь мы фильтруем вот так
let filteredData = data.filter(item => item['Насколько курс был полезен?'] == selectPoleznost.value)
когда мы выбрали значение не важно, он начинает оставлять те записи у которых в отзыве по ключу item['Насколько курс был полезен?'] стоит значение не важно. А таких нет…
Значит надо просто значения не важно обрабатывать отдельно. С точки зрения логического выражения это можно записать так:
let filteredData = data.filter(item => {
// чтобы не получалось сильно длинных строчек, я перепишу анонимную функцию через return
return selectPoleznost.value == 'не важно' || item['Насколько курс был полезен?'] == selectPoleznost.value
})
супер =)
вот такой итоговый код получается
Теперь можно и задание поделать =О
Я понимаю, что ты давно уже хочешь нарисовать какой-нибудь график. Но мы не можем этого сделать пока не научимся готовить данные =(
Чтобы построить что-то интересное важно еще освоить группировку. Мы очень поверхностно пока по ней пройдем.
В общем смотри, у нас есть столбик с данными
и я хочу посчитать сколько раз какое значение встречается. Например, если судить по картинке, то получаем:
Как-такое считать?
Сначала надо получить список значений в столбике. Идем в нашу функцию fillList
надо взять отфильтрованные данные и смэпить значения по конкретному ключу. Выглядит это так:
let poleznost = filteredData.map(item => item['Насколько курс был полезен?']);
console.log("Значения в столбике полезность:")
console.log(poleznost)
то есть наш код как раз генерирует этот вывод
теперь мне надо посчитать количество каждых значений. Это так называемый частотный анализ. Делается это следующим образом.
let poleznostCounters = {} // заводим пустой словарик
poleznost.forEach(item => { // с помощью forEach, обходим элементы списка
// poleznostCounters[item] | 0 -- это хитрая фиговина
// которая вернет значение poleznostCounters[item] если ключ item есть в словарике poleznostCounters
// и 0 если ключа item нет в словарике poleznostCounters
// ну а "+1" это чтобы увеличивать предыдущее значение ключа на 1, когда встречаем очередное значение
// то есть когда встретим первый раз то положится значение 1
poleznostCounters[item] = (poleznostCounters[item] | 0) + 1
})
// ну и выводим
console.log(poleznostCounters)
увидим в консольке сколько кто раз встречается
то что нам и надо =)
Так как данные которые выводятся в консольку, это удобно только для тестирования, давай выведем их на страницу.
Создадим блок под эти данные:
<div class="container mt-2">
<div id="poleznostStats">
<span>Полезность:</span>
<span class="stats"></span>
</div>
</div>
и теперь выведем агрегированные данные
let poleznostStatsNode = document.querySelector("#poleznostStats .stats")
poleznostStatsNode.innerText = JSON.stringify(poleznostCounters);
JSON.stringify(poleznostCounters) – преобразует словарик в текстовый вид и позволяют вывести его прямо на форму
я думаю идея понятна, попробуй теперь сделать задание
Так как ты, наверное, уже сгораешь от нетерпения в надежде построить график. Давай его таки построим.
Так как это на самом деле это отнюдь не самая простая тема, к тому же очень обширная, то мы не будем пока использовать самую навороченную библиотеку для построения графиков echarts
А возьмем библиотеку попроще, которая называется charts.js
Все библиотеки по визуализации данных для веба, работают по одному и тому же принципу:
index.htmlДавай выполним эту технологию для chart.js. Вообще, если что, есть инструкция тут https://www.chartjs.org/docs/latest/getting-started/, но я сразу адаптирую процесс для нашего пример
И так, добавляем скрипт вниз страницы index.html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
теперь создадим контейнер под график
<div class="container mt-2">
<canvas id="chart"></canvas>
</div>
теперь идем в main.js и добавим там функцию createChart
пишем в нее
async function createChart() {
// взяли контейнер для графика
const chartContainer = document.querySelector('#chart');
// создали график
new Chart(chartContainer, {
type: 'bar', // bar -- значит гистограмма
data: {
labels: ['Средний', 'Полезный', 'Очень полезный'], // это значения оси X
datasets: [{
label: 'количество голосов', // пояснение
data: [12, 19, 3], // это значения оси Y
}]
},
});
}
глянем что получилось:
ого, вот это да! =О
Правда значения пока взяты из воздух и на реальные данные не реагируют:
давай сделаем график чуток поменьше, для этого укажем высоту родителя, вот так:
получится вот так:
чтобы график растягивался на всю ширину, надо в main.js добавить ему свойство
options: {
maintainAspectRatio: false
}
тогда он уже растянется на всю ширину:
Теперь давай попробуем привязать его к реальным данным.
Для этого надо завести переменную, которая будет привязана к объекту Chart и у которой потом можно будет обновлять данные. Делается это так
теперь идем в функцию fillList туда, где идет вывод статистики полезности
и нам надо в это метод добавить код, который проставит реальные значения по оси X и по оси Y
если попробовать вывести
console.log(poleznostCounters)
то увидим:
тут получается, что ключи – это значения по X, а значения ключей – это значения по оси Y
В javascript есть классные методы, которые позволяют вытащить отдельно ключи и отдельно значения. Пишутся они вот так:
Object.keys(poleznostCounters)
Object.values(poleznostCounters)
попробуем из вывести:
console.log(Object.keys(poleznostCounters))
console.log(Object.values(poleznostCounters))
красота! =) Только что с ней делать?
Да, все просто! Вытаскиваем ключи и значения, передаем в переменную poleznostChart и не забываем вызвать update
let labels = Object.keys(poleznostCounters)
let values = Object.values(poleznostCounters)
poleznostChart.data.labels = labels // передали ось X
poleznostChart.data.datasets = [{
label: 'количество голосов',
data: values, // передали ось Y
}]
poleznostChart.update() // перерисовали график
получаем такое
причем все динамически работает
кстати можно теперь упростить момент создания графика, оставить там только тип и растяжение, вот так:
async function createChart() {
const chartContainer = document.querySelector('#chart');
poleznostChart = new Chart(chartContainer, {
type: 'bar',
options: {
maintainAspectRatio: false
},
});
}
Возможно количество кода начинает уже пугать =О
Но попробуй теперь сделать задание =)