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

Question

[MarkBogrov]

Делаю каталог на Vue, хочу выбрать из массива уникальные значения и рядом отобразить количество совпадений.

Например у меня есть вот такой массив:

{
...
	type: "product",
	country: "Russia",
	city: "Moscow",
},
{
...
	type: "product",
	country: "Russia",
	city: "Volgograd",
},
{
...
	type: "object",
	country: "Poland",
	city: "Warszawa",
},

На выходе хочу получить такие данные:

Country:
Russia (2)
Poland (1)
City:
Moscow (1)
Volgograd (1)
Warszawa (1)
Type
Product (2)
Object (1)

Как получить уникальные ключи из массива и затем посчитать их совпадения?

Answer 1

[0xD34F]

Обходите массив, считаете все встреченные свойства/значения, оформляете это дело как computed свойство:

groupedItems() {
  return this.items.reduce((acc, n) => {
    for (const k in n) {
      acc[k] = acc[k] || {};
      acc[k][n[k]] = (acc[k][n[k]] || 0) + 1;
    }
    return acc;
  }, {});
}

Выводите с помощью v-for:

<div v-for="(group, groupName) in groupedItems">
  <h3>{{ groupName }}:</h3>
  <div v-for="(value, key) in group">{{ key }} ({{ value }})</div>
</div>

Answer 2

[Александр Шелеметьев]

Как писал 0xD34F, сделайте computed свойства и выводите их через v-for.
Пример:

computed: {
  countries () {
    return this.data
      .map((x) => x.country) // для каждого элемента из массива объектов data возвращаем страну
      .reduce((r, с) => [...new Set(r.concat(с))], []) // оставляем только уникальные значения
      .map((с) => { // для каждого элемента из полученного массива
        return { // возвращаем 
          'country': с, // наименование страны
          'count': this.data.filter(cx => cx.country === с).length // количество элементов в исходном массиве с таким же наименованием страны
        }
      })
  }
}

для городов и типов делаете так же

UPD.
Чтобы не дублировать код, сделайте по аналогии с функцией выше метод, возвращающий из вашего массива новый массив уникальных значений с количеством вхождений

Answer 3

[Иван]

Lodash вам в руки.
А Vue только шаблонизатор.