@MarkBogrov

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

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

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

{
...
	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)

Как получить уникальные ключи из массива на VueJS? И затем посчитать их соападения?
Например в Laravel для первого случая ставлю в запросе метод distinct() еслить ли что то подобное в Vue?

Благодарю за любый пинки в нужную сторону!
  • Вопрос задан
  • 569 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
Обходите массив, считаете все встреченные свойства/значения, оформляете это дело как 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>
Ответ написан
zoroda
@zoroda
Необычный Fullstack. Ищу интересный стартап.
Как писал 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.
Чтобы не дублировать код, сделайте по аналогии с функцией выше метод, возвращающий из вашего массива новый массив уникальных значений с количеством вхождений
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы