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

Question

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

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

[{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'],
      },

我正试图让它像我在这里的“书籍”一样工作，但适用于所有类别。 这就是我用下面的代码显示的内容。它显示为“项目：3”，因为我的 userData 中有 3 本书，但我需要它来显示每个唯一类别的数量。 我不知道在下面的代码中放置什么 filteredItems = items.filter((item) => item.category === 'Books').length

方法/功能

   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)
    },