Как сформировать отдельные списки слов по первой букве слова

Мне нужно вывести слова, которые начинаются на одинаковые буквы в разные списки ul

 let fLetter = [] // массив для первых букв слова
  const array = ["apple", "apricot", "avocado", 'banana', 'bekon', 'chery']
    for (const m of array) {
        fLetter.push(m.charAt(0)) // пушим в массив первые буквы слов
    }
     console.log(fLetter) // вывожу в консоль все первые буквы
  const out = array.filter((el) => {
    let count = 0;
    if(el[count] === fLetter[count]) //  думаю), что сравниваю первую букву из массива слов и буквы из массива букв
    count++
    let ul = document.createElement("ul"); 
    let newtextitem = document.createElement('li') 
    newtextitem.textContent = el
    ul.appendChild(newtextitem)
    document.body.appendChild(ul)
  });
Я помню, что решал подобное задание, но найти - не могу)

Чувствую себя Лосяшем из Смешариков в серии "Запретный плод". Вроде бы уже тошнит от программирования, но остановиться не могу)


Ответы (1 шт):

Автор решения: Owlly

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

const array = ["apple", "apricot", "avocado", 'banana', 'bekon', 'chery'];

// Объект для группировки слов по первой букве
let groupedWords = {};

for (const word of array) {
    const firstLetter = word.charAt(0);
    if (!groupedWords[firstLetter]) {
        groupedWords[firstLetter] = []; // Если ещё нет группы, создаём её
    }
    groupedWords[firstLetter].push(word);
}

for (const letter in groupedWords) {
    const ul = document.createElement("ul"); // Создаём новый <ul> для каждой группы
    const title = document.createElement("h3");
    title.textContent = `Words that start with "${letter}":`; // Заголовок для списка
    document.body.appendChild(title);

    groupedWords[letter].forEach(word => {
        const li = document.createElement('li');
        li.textContent = word;
        ul.appendChild(li); 
    });

    document.body.appendChild(ul); // Добавляем <ul> на страницу
}

→ Ссылка