如何在 Vuejs/JS 中显示对象数组中的唯一项和出现次数？

Question

我正在为这个项目使用 Vuejs 开发一个库存应用程序，但我的问题特别是与 JS 相关的问题。在我的数据中，我有用户数据，它是从表单中获取的记录用户数据，然后是您可以从下面选择的静态类别和位置。

我正在尝试提取独特的类别以及它们在新的对象数组中出现的次数：

[{title: 'Books', amount: 3 }, {title: 'Recods', amount: 1 }, ...]

我认为我遇到的是范围问题。

数据

userData: {
        items: [
          {
            itemName: 'test book',
            category: 'Books',
            location: 'Kitchen',
          },
          {
            itemName: 'test book 2',
            category: 'Books',
            location: 'Garage',
          },
          {
            itemName: 'test book 3',
            category: 'Books',
            location: 'Basement',
          },
          {
            itemName: 'test record',
            category: 'Records',
            location: 'Basement',
          },
          {
            itemName: 'test furniture',
            category: 'Furniture',
            location: 'Garage',
          },
        ],
        categories: ['Books', 'Movies', 'Records', 'Furniture'],
        locations: ['Basement', 'Garage', 'Kitchen'],
      },

我正在努力使它像我在这里使用 'Books' 一样工作，但适用于所有类别。这就是我用下面的代码显示的内容。它显示为 'Items: 3'，因为我的用户数据中有 3 本书，但我需要它来显示每个唯一类别的数量。我无法弄清楚要在下面的代码中放置什么 filteredItems = items.filter((item) => item.category === 'Books').length

method/function

   convertedCategories() {
      const items = this.userData.items
      const filteredItems = items.filter((item) => item.category === 'Books').length

      function getItemCountOfCategory(categoryName) {
        return filteredItems
      }
      function convertCategoriesIntoCards(categories) {
        return categories.map((el) => {
          return {
            title: el,
            amount: getItemCountOfCategory(el),
          }
        })
      }
      return convertCategoriesIntoCards(this.userData.categories)
    },

如果我没有把它分解得足够清楚，我深表歉意；我仍然很难从这么多代码中提取与问题相关的特定行。

如有不明之处，请告诉我！

Answer 1

像这样的东西应该有用。

   convertedCategories() {
      const items = this.userData.items
      function getItemCountOfCategory(categoryName) {
        return items.filter((item) => item.category === categoryName).length
      }
      function convertCategoriesIntoCards(categories) {
        return categories.map((el) => {
          return {
            title: el,
            amount: getItemCountOfCategory(el),
          }
        })
      }
      return convertCategoriesIntoCards(this.userData.categories)
    },

如何在 Vuejs/JS 中显示对象数组中的唯一项和出现次数？

How to display unique items and the amount of occurances from an array of objects in Vuejs/JS?

javascript

vue.js

filter

array.prototype.map