Grouping an array of objects by key

Question

I have this array of objects, and I want them to group by their specific key, in this case tags

var items = [
    {id: 0, tags: ["a"], name: "foo"},
    {id: 1, tags: [], name: "bar"},
    {id: 2, tags: ["a"], name: "bazz"},
    {id: 3, tags: ["b"], name: "wah"},
    {id: 4, tags: ["c"], name: "ikr"},
    {id: 5, tags: ["a"], name: "wtf"},
    {id: 6, tags: ["a","b"], name: "gtg"},
    {id: 7, tags: ["c"], name: "afk"}
]

And so I used underscore, like so:

var groupItems = _.groupBy(items, function(obj) {
  return obj.tags;
});

The problem with that is that:

{
"a": [
        {"id": 0,"tags": ["a"],"name": "foo"},
        {"id": 2,"tags": ["a"],"name": "bazz"},
        {"id": 5,"tags": ["a"],"name": "wtf"}
     ],
"":  [
        {"id": 1,"tags": [],"name": "bar"}
     ],
"b": [
         {"id": 3,"tags": ["b"],"name": "wah"}
     ],
"c": [
         {"id": 4,"tags": ["c"],"name": "ikr"},
         {"id": 7,"tags": ["c"],"name": "afk"}
     ],
"a,b": [
         {"id": 6,"tags": ["a","b"],"name": "gtg"}
     ]

}

If you would also notice, those who has multiple tags, created a joined key from the array tags which is quite an undesirable result. How can I, group them by tags and duplicate the data when they have multiple tags

What you have is an array of objects, not JSON. JSON is a data-format, like XML or CSV. — Felix Kling
– Felix Kling, Commented Apr 27, 2015 at 16:51
why your id:6 in result have "tags": ["a","b"] but in source tags: ["a"] — Grundy
– Grundy, Commented Apr 27, 2015 at 16:55

rgthree · Accepted Answer · 2015-04-27 17:07:29Z

Assuming you want duplicate entries under each tag when an item has multiple tags _.groupBy will not do what you want as it simply splits a collection up (won't duplicate entries).

Instead, you will need to loop over your items manually, then each item's tags and build up your list for you (you could use _.each if you wanted):

var items = [
    {id: 0, tags: ["a"], name: "foo"},
    {id: 1, tags: [], name: "bar"},
    {id: 2, tags: ["a"], name: "bazz"},
    {id: 3, tags: ["b"], name: "wah"},
    {id: 4, tags: ["c"], name: "ikr"},
    {id: 5, tags: ["a"], name: "wtf"},
    {id: 6, tags: ["a","b"], name: "gtg"},
    {id: 7, tags: ["c"], name: "afk"}
];

var groupItems = {};
for (var i = 0, item; item = items[i]; i++) {
  for (var t = 0, tag; tag = item.tags[t]; t++) {
    // If we do not have an array for our tag, add one
    groupItems[tag] = groupItems[tag] || [];
    // Push out item onto the tag's list in our groupItems
    groupItems[tag].push(item);
  }
}

Which will give you:

{
  "a": [
    {"id": 0,"tags": ["a"],"name": "foo"},
    {"id": 2,"tags": ["a"],"name": "bazz"},
    {"id": 5,"tags": ["a"],"name": "wtf"},
    {"id": 6,"tags": ["a","b"],"name": "gtg"}
  ],
  "b": [
    {"id": 3,"tags": ["b"],"name": "wah"},
    {"id": 6,"tags": ["a","b"],"name": "gtg"}
  ],
  "c": [
    {"id": 4,"tags": ["c"],"name": "ikr"},
    {"id": 7,"tags": ["c"],"name": "afk"}
  ]
}

Luan Castro · Accepted Answer · 2015-04-27 17:02:01Z

I created a solution based on your needs, put importance on the readability and maintenance

http://jsfiddle.net/6x6vvukq/

var items = [
    {id: 0, tags: ["a"], name: "foo"},
    {id: 1, tags: [], name: "bar"},
    {id: 2, tags: ["a"], name: "bazz"},
    {id: 3, tags: ["b"], name: "wah"},
    {id: 4, tags: ["c"], name: "ikr"},
    {id: 5, tags: ["a"], name: "wtf"},
    {id: 6, tags: ["a"], name: "gtg"},
    {id: 7, tags: ["c"], name: "afk"}
]

function groupByTags(items){

    var grouped = {};    

    items.forEach(function(item){   
        var tags = item.tags;
        if(!tags.length) tags.push("");

        tags.forEach(function(tag){

            if(tag in grouped == false){
                grouped[tag] = [];
            }
            grouped[tag].push(item);

        });        
    });    

    return grouped;

}

console.log(groupByTags(items));

MrTambourine · Accepted Answer · 2015-04-27 17:06:43Z

1

Here is a little function that properly handles empty arrays of tags. You may want to replace forEach with for loop for better performance and add some type checks to make this function more generic and less error prone.

function groupBy(arr, propName) {
    var grouped = {};

    arr.forEach(function (thing) {
        var values = thing[propName];

        if (!values.length) {
            grouped[''] = grouped[''] || [];
            grouped[''].push(thing);

            return;
        }

        values.forEach(function (value) {
            grouped[value] = grouped[value] || [];
            grouped[value].push(thing)
        });
    });

    return grouped;
}

http://jsfiddle.net/cscrak32/

answered Apr 27, 2015 at 17:06

MrTambourine

464 bronze badges

Comments

Grundy · Accepted Answer · 2015-04-27 17:25:09Z

Yet another variant with reduce

items.reduce(function(acc, el) {
  (el.tags.length === 0 ? [""] : el.tags).forEach(function(el2) {
    if (!acc[el2]) acc[el2] = [];
    acc[el2].push(el);
  });
  return acc;
}, {});

var items = [{
  id: 0,
  tags: ["a"],
  name: "foo"
}, {
  id: 1,
  tags: [],
  name: "bar"
}, {
  id: 2,
  tags: ["a"],
  name: "bazz"
}, {
  id: 3,
  tags: ["b"],
  name: "wah"
}, {
  id: 4,
  tags: ["c"],
  name: "ikr"
}, {
  id: 5,
  tags: ["a"],
  name: "wtf"
}, {
  id: 6,
  tags: ["a", "b"],
  name: "gtg"
}, {
  id: 7,
  tags: ["c"],
  name: "afk"
}]

var result = items.reduce(function(acc, el) {
  (el.tags.length === 0 ? [""] : el.tags).forEach(function(el2) {
    if (!acc[el2]) acc[el2] = [];
    acc[el2].push(el);
  });
  return acc;
}, {});

document.getElementById('res').innerHTML = JSON.stringify(result, null, 2)

<pre id="res"></pre>

Collectives™ on Stack Overflow

Grouping an array of objects by key

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related