How to group array of objects by multiple keys with and without Lodash?

Question

export default [
  {
    id: 101,
    league: {
      id: "500",
      name: "EU Champions League"
    },
    group: {
      id: "990",
      name: "Group A"
    }
  },
  {
    id: 102,
    league: {
      id: 600,
      name: "Super Lig"
    }
  },
  {
    id: 103,
    league: {
      id: 500,
      name: "EU Champions League"
    }
  },
  {
    id: 104,
    league: {
      id: 500,
      name: "EU Champions League"
    }
  },
  {
    id: 105,
    league: {
      id: 500,
      name: "EU Champions League"
    },
    group: {
      id: "991",
      name: "Group B"
    }
  },
  {
    id: 106,
    league: {
      id: 500,
      name: "EU Champions League"
    },
    group: {
      id: "991",
      name: "Group B"
    }
  }
];

Here is a live demo, but it's nowhere near what I'm expecting it, it's good for reference to determine what I'm trying to do and obviously failed!

https://codesandbox.io/s/js-group-array-of-object-by-multiple-keys-8b4s0

The array of objects looks like this;

Eu Champions League - Group A
Super Lig
EU Champions League
EU Champions League
EU Champions League - Group B
EU Champions League - Group B

What I'm trying to do is grouping ones with same league id and ones with same league id + group name, outputting it as an object where object key is the 'league id + group id' (where needed); So it becomes like so;

{
      // All objects with league id 500 and group A
      '500-990': [{
        id: 101,
        league: {
          id: "500",
          name: "EU Champions League"
        },
        group: {
          id: "990",
          name: "Group A"
        }
      }],
      // All objects with league id 600
      '600': [{
        id: 102,
        league: {
          id: 600,
          name: "Super Lig"
        }
      }],
      // All objects with league id 500 only with NO groups
      '500': [{
        id: 103,
        league: {
          id: 500,
          name: "EU Champions League"
        }
      },
      {
        id: 104,
        league: {
          id: 500,
          name: "EU Champions League"
        }
      }],
      // All objects with league id 500 and group B
      '500-991': [{
        id: 105,
        league: {
          id: 500,
          name: "EU Champions League"
        },
        group: {
          id: "991",
          name: "Group B"
        }
      },
      {
        id: 106,
        league: {
          id: 500,
          name: "EU Champions League"
        },
        group: {
          id: "991",
          name: "Group B"
        }
      }],
}

Your example shows that you want to use the key '500' 3 times. Javascript objects cannot have duplicate keys. — abney317
– abney317, Commented Nov 9, 2020 at 18:34
please change the wanted result, because you can not have same keys in an object. — Nina Scholz
– Nina Scholz, Commented Nov 9, 2020 at 18:34
@NinaScholz, of course :) just updated the expected result, thank you — ZAD
– ZAD, Commented Nov 9, 2020 at 18:38
@abney317 Sorry my bad, updated the expected result, thank you — ZAD
– ZAD, Commented Nov 9, 2020 at 18:39

Khai · Accepted Answer · 2020-11-09 18:44:45Z

Basically creating the key based on if group exists, if it does then add on the group letter to the end and create the array.

const groupById = (arr) => {
    let resp = {};
    
    for (const val of arr) {
      const key = val.group ? val.league.id + '-' + val.group.name.slice(-1).toLowerCase() : val.league.id;
      if (!resp[key]) {
        resp[key] = [val];
      }
      resp[key].push(val);
    }
    
    return resp;
 }

const input = [{
    id: 101,
    league: {
      id: "500",
      name: "EU Champions League"
    },
    group: {
      id: "990",
      name: "Group A"
    }
  },
  {
    id: 102,
    league: {
      id: 600,
      name: "Super Lig"
    }
  },
  {
    id: 103,
    league: {
      id: 500,
      name: "EU Champions League"
    }
  },
  {
    id: 104,
    league: {
      id: 500,
      name: "EU Champions League"
    }
  },
  {
    id: 105,
    league: {
      id: 500,
      name: "EU Champions League"
    },
    group: {
      id: "991",
      name: "Group B"
    }
  },
  {
    id: 106,
    league: {
      id: 500,
      name: "EU Champions League"
    },
    group: {
      id: "992",
      name: "Group B"
    }
  }];

  
  console.log(groupById(input));

Nina Scholz · Accepted Answer · 2020-11-09 18:53:22Z

You could take a combined key, if necessary and group by this value.

const
    data = [{ id: 101, league: { id: "500", name: "EU Champions League" }, group: { id: "990", name: "Group A" } }, { id: 102, league: { id: 600, name: "Super Lig" } }, { id: 103, league: { id: 500, name: "EU Champions League" } }, { id: 104, league: { id: 500, name: "EU Champions League" } }, { id: 105, league: { id: 500, name: "EU Champions League" }, group: { id: "991", name: "Group B" } }, { id: 106, league: { id: 500, name: "EU Champions League" }, group: { id: "992", name: "Group B" } }],
    result = data.reduce((r, o) => {
        const
            key = o.group
                ? [o.id, o.group.name].join('-')
                : o.id;
        (r[key] ??= []).push(o);
        return r;
    }, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

How to group array of objects by multiple keys with and without Lodash?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related