How to concatenate unique values ​​in an array of objects?

Question

JavaScript

Trying to make a mixin in PUG

- var data =
[
    {
        "title": "Артем"
    },
    {
        "title": "Аня"
    },
    {
        "title": "Виталик"
    },
    {
        "title": "Гена"
    },
    {
        "title": "Дима"
    },
    {
        "title": "Вася"
    },
    {
        "title": "Гриша"
    },
    {
        "title": "Андрей"
    }
]

mixin sort(data)
  - var sort = data.sort(function(a, b) {return a.title.localeCompare(b.title);}); // сортируем по алфавиту
  each item in sort
    .div= title.charAt(0)

As a result I get

А
А
А
В
В
Г
Г
Д

How can I combine repeated letters, and then display the names, so that they get such
A
Artem
Anya
V
Vitalik
Vasya
G
Gena
Grisha
, etc.

Answer 1

- var data = [ { "title": "Артем" }, { "title": "Аня" }, { "title": "Виталик" }, { "title": "Гена" }, { "title": "Дима" }, { "title": "Вася" }, { "title": "Гриша" }, { "title": "Андрей" } ]

mixin sort(data)
  - var grouped = data.reduce((acc, n) => {
  -   var name = n.title[0];
  -   acc[name] = acc[name] || [];
  -   acc[name].push(n);
  -   return acc;
  - }, {});
  each group, name in grouped
    div
      h3= name
      each obj in group
        div= obj.title

div
  +sort(data)