Как отсортировать массив с добавлением разделителей групп?

Question

[Сергей]

Хочу задать вопрос, из-за которого появляются темы "Сколько будет таких вопросов", но задам.
Делаю скрипт, выводящий на экран список в алфавитном порядке и хочу, чтобы список выводился в следующем порядке:
Буква
Слова по алфавиту, начинающихся с этой буквы, т.е.
A
Adam
J
John
M
Mary
Mike

$scope.dis =
          [{name:'John', anchor:'123'},
           {name:'Mary' , anchor:'123'},
           {name:'Mike'  anchor:'123'},
           {name:'Adam' anchor:'123'},"

Какая последовательность действий должна быть у скрипта?
1) Отсортировать массив по алфавиту $scope.names = $scope.dis.sort();
Брать по элементу, куда то записывать первый символ каждого элемента names, а потом сравнивать со следующей буквой?
Вообще какой способ есть менее затратный?
Это ни в коем случае не задание - хочется именно алгоритм

Comments

[Алексей Ярошевич]

Правильнее будет назвать: отсортировать массив с добавлением в него специальных разделителей групп, или что-то в этом духе.

Answer 1

[Алексей Ярошевич]

Толи я не понимаю, толи это ответ:

// сортируем
var sorted = $scope.dis.sort(function (a, b) {
  return a.name > b.name? 1 :  -1;
});
// собираем сам массив
var sortedWithGroups = sorted.reduce(function (res, a) {
  // добавляем дополнительно букву перед первым словом на новую букву
  // если это первое слово на эту букву
  if (res.lastGroup !== a.name[0]) {
    res.lastGroup = a.name[0];
    res.push({name: a.name[0], group: true});
  }
  // добавляем саму ссылку
  res.push(a);
  return res;
}, []);

В итоге в sortedWithGroups отсортированный массив с группировкой по буквам.

p.s. Разделил на переменные только ради комментариев. Все это можно собрать в несколько строк и вызывать reduce сразу после sort в одной конструкции.

Ссылки:
Array.prototype.sort: https://developer.mozilla.org/en-US/docs/Web/JavaS...
Array.prototype.reduce: https://developer.mozilla.org/en-US/docs/Web/JavaS...

Comments

[Сергей]

Ответ в лучших традициях SO. Спасибо вам. (и не знал я про reduce) . Но, в каких случаях после сортировки в lastGroup (символ точно читает и записывает) консоль может выдавать TypeError: Cannot read property 'push' of undefined на res.push({name: a.name[0], group: true}); ?

[Сергей]

a.name[0] существует

[Алексей Ярошевич]

Сергей: В каждом. Ошибка в коде. Reduce должен возвращать ссылку на результат. Правлю код ;-)

[Алексей Ярошевич]

Сергей: На второй итерации в res оказывалось undefined — и (undefined).push естественно вызывал эту ошибку. Добавил в функцию return res в конец, теперь все ок.

[Сергей]

Всё супер plnkr.co/edit/r6EHwwpWSnLMJu9KmVdC?p=preview

[Алексей Ярошевич]

Отлично ;-)

[Сергей]

Да. Спасибо еще раз. Теперь пошел разбивать его на колонки при разной ширине, высоте и длине элементов массива. Ждите новых вопросов)

[Алексей Ярошевич]

Сергей: :-) На тостере есть функция «призвать к ответу» — можно попробовать ею воспользоваться. Ответить не сложно, но часто не вижу вопросов.

Answer 2

[Андрей]

Алгоритм такой:
1. Отсортировать всё по алфавиту.
2. Выводить слова в цикле, при этом выводить букву-заголовок только если она не совпадает с первой буквой прошлого слова.

Comments

[Сергей]

Да, спасибо. Подумаю как это сделать в случае с angular. Либо в директиве push букву в массив еще один и выводить уже его.

[Алексей Ярошевич]

Сергей: проще прогнать через reduce.

Answer 3

[Алексей Павлов]

Я использую lodash/underscore для таких зачач.

_.sortBy(['a', 'b', 'c'], function(s){ 
    return s.charCodeAt() * -1;
});

А вообще в angularjs есть нативный сервис $filter. Он тоже это умеет делать.

https://docs.angularjs.org/api/ng/filter/orderBy