javascript - 按类别分组数据

Question

我有一个对象数组，每个对象都有一个类别数组。类别可以重复。我想按每个类别对这些数据进行分组，并以类别作为标题将它们显示在另一个之下。

想象一下我有

[
  {
   title: 'Title 1',
   id: '1',
   categories: ['food']
  },
  {
   title: 'Title 2',
   id: '2',
   categories: ['cat']
  },
  {
   title: 'Title 3',
   id: '3',
   categories: ['food', 'cat']
  },
  {
   title: 'Title 4',
   id: '4',
   categories: ['sky']
  },
  {
   title: 'Title 5',
   id: '5',
   categories: ['cat', 'sky']
  },
]

在本Food节的这种情况下，我应该有Title 1等等Title 2。

有谁知道如何对这些数据进行分组？谢谢！

标签： javascriptvue.js

Answer 1

工作演示：

var myArr = [
  {
   title: 'Title 1',
   id: '1',
   categories: ['food']
  },
  {
   title: 'Title 2',
   id: '2',
   categories: ['cat']
  },
  {
   title: 'Title 3',
   id: '3',
   categories: ['food', 'cat']
  },
  {
   title: 'Title 4',
   id: '4',
   categories: ['sky']
  },
  {
   title: 'Title 5',
   id: '5',
   categories: ['cat', 'sky']
  },
];

function myFun(arr) {
    var uniqueCats = [];
    var catsObj = {};
    var finalArr = [];

    for (var i = 0; i < arr.length; i++) {
        var item = arr[i]; 
        var cats = item.categories;
        var title = item.title;
        var id = item.id;

        for (var j = 0; j < cats.length; j++) {
            var cat = cats[j];

            if (uniqueCats.indexOf(cat) < 0) {
                uniqueCats.push(cat); //console.log(uniqueCats);
                catsObj[cat] = [];
            } 

            catsObj[cat].push({
                'title': title,
                'id': id
            });
        }
    }

    for(var key in catsObj) {
        finalArr.push({
            "category": key,
            "items": catsObj[key]
        });
    }

    return finalArr;
}

console.log(myFun(myArr));