Home > Mobile >  Grouping an array by multiple keys with Array.reduce()
Grouping an array by multiple keys with Array.reduce()

Time:12-07

I am writing here for the first time, and I was given the following problem. For example, I have the following array:

const input = [
  {
    id: 1,
    date: "01-01-2021",
    source: "TT",
    metrics: { conversions: 10, cpl: 3 },
  },
  {
    id: 2,
    date: "01-01-2021",
    source: "TT",
    metrics: { conversions: 15, cpl: 3 },
  },
  {
    id: 3,
    date: "01-01-2021",
    source: "FB",
    metrics: { conversions: 15, cpl: 4 },
  },
  {
    id: 4,
    date: "01-01-2021",
    source: "FB",
    metrics: { conversions: 15, cpl: 4 },
  },
  {
    id: 5,
    date: "02-01-2021",
    source: "TT",
    metrics: { conversions: 5, cpl: 2 },
  },
  {
    id: 6,
    date: "02-01-2021",
    source: "TT",
    metrics: { conversions: 15, cpl: 2 },
  },
  {
    id: 7,
    date: "02-01-2021",
    source: "FB",
    metrics: { conversions: 25, cpl: 1 },
  },
  {
    id: 8,
    date: "02-01-2021",
    source: "FB",
    metrics: { conversions: 30, cpl: 1 },
  },
];

And I need to get an array grouped by date and source and the value will be the sum of all its values ​​for a specific date, for example as the result below:

const output = [
  {
    date: "01-01-2021",
    TT: 25,
    FB: 30,
  },
  {
    date: "02-01-2021",
    TT: 20,
    FB: 55,
  },
];

In my solution, I find unique keys and dates, but do not understand what to do next. Can you help me? Sample code:

const result = input.reduce((acc, current) => {
  const dateItem = acc.find((item) => item.date === current.date);
  const sources = input.map((item) => item.source).filter((value, index, self) => self.indexOf(value) === index);

  if (dateItem) {
    return [...acc.filter((i) => i.date !== current.date), { ...dateItem }];
  }

  return [...acc, { date: current.date }];
}, []);

CodePudding user response:

Simple reduce loop using the date as a key. After you get it all combined, you can use values to get the array.

const input = [{
    id: 1,
    date: "01-01-2021",
    source: "TT",
    metrics: {
      conversions: 10,
      cpl: 3
    },
  },
  {
    id: 2,
    date: "01-01-2021",
    source: "TT",
    metrics: {
      conversions: 15,
      cpl: 3
    },
  },
  {
    id: 3,
    date: "01-01-2021",
    source: "FB",
    metrics: {
      conversions: 15,
      cpl: 4
    },
  },
  {
    id: 4,
    date: "01-01-2021",
    source: "FB",
    metrics: {
      conversions: 15,
      cpl: 4
    },
  },
  {
    id: 5,
    date: "02-01-2021",
    source: "TT",
    metrics: {
      conversions: 5,
      cpl: 2
    },
  },
  {
    id: 6,
    date: "02-01-2021",
    source: "TT",
    metrics: {
      conversions: 15,
      cpl: 2
    },
  },
  {
    id: 7,
    date: "02-01-2021",
    source: "FB",
    metrics: {
      conversions: 25,
      cpl: 1
    },
  },
  {
    id: 8,
    date: "02-01-2021",
    source: "FB",
    metrics: {
      conversions: 30,
      cpl: 1
    },
  },
];


const results = Object.values(input.reduce((o, data) => {
  o[data.date] = o[data.date] || { date: data.date };
  o[data.date][data.source] = (o[data.date][data.source] || 0)   data.metrics.conversions;
  return o;
}, {}));
console.log(results);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Array.reduce with Object.values will give the result.

const input = [
  { id: 1, date: "01-01-2021", source: "TT", metrics: { conversions: 10, cpl: 3 }, },
  { id: 2, date: "01-01-2021", source: "TT", metrics: { conversions: 15, cpl: 3 }, },
  { id: 3, date: "01-01-2021", source: "FB", metrics: { conversions: 15, cpl: 4 }, },
  { id: 4, date: "01-01-2021", source: "FB", metrics: { conversions: 15, cpl: 4 }, },
  { id: 5, date: "02-01-2021", source: "TT", metrics: { conversions: 5, cpl: 2 }, },
  { id: 6, date: "02-01-2021", source: "TT", metrics: { conversions: 15, cpl: 2 }, },
  { id: 7, date: "02-01-2021", source: "FB", metrics: { conversions: 25, cpl: 1 }, },
  { id: 8, date: "02-01-2021", source: "FB", metrics: { conversions: 30, cpl: 1 }, },
];
const output = input.reduce((acc, curr) => {
  if (acc[curr.date]) {
    acc[curr.date][curr.source] = (acc[curr.date][curr.source] || 0)   curr.metrics.conversions; 
  } else {
    acc[curr.date] = {
      date: curr.date,
      [curr.source]: curr.metrics.conversions
    }
  }
  return acc;
}, {});
console.log(Object.values(output));
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related