Агрегируем по столбцу

Я понимаю, что ты давно уже хочешь нарисовать какой-нибудь график. Но мы не можем этого сделать пока не научимся готовить данные =(

Чтобы построить что-то интересное важно еще освоить группировку. Мы очень поверхностно пока по ней пройдем.

В общем смотри, у нас есть столбик с данными

и я хочу посчитать сколько раз какое значение встречается. Например, если судить по картинке, то получаем:

• Полезный – 6 раз
• Средний – 2 раза
• Очень полезный - 1 раз

Как-такое считать?

Сначала надо получить список значений в столбике. Идем в нашу функцию 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) – преобразует словарик в текстовый вид и позволяют вывести его прямо на форму

я думаю идея понятна, попробуй теперь сделать задание

Задание