How to group an array of object with property with another array

Question

I have this array:

var arr = [
  {
    count: 27,
    dataRil: "08/06/21",
    subCateg: "FISH",
  },
  {
    count: 22,
    dataRil: "08/06/21",
    subCateg: "DOG",
  },
  {
    count: 28,
    dataRil: "09/06/21",
    subCateg: "FISH",
  },
  {
    count: 18,
    dataRil: "09/06/21",
    subCateg: "DOG",
  },
  {
    count: 1,
    dataRil: "09/06/21",
    subCateg: "CAT",
  },
  {
    count: 1,
    dataRil: "09/06/21",
    subCateg: "BIRD",
  },
];

I want to group it by label and in the data element, I want the count in the array. How can I achieve this

output like:

var datasets = [
  {
    label: "FISH",
    data: [27, 28],
  },
  {
    label: "DOG",
    data: [22, 18],
  },
  {
    label: "CAT",
    data: [0, 1],
  },
  {
    label: "BIRD",
    data: [0, 1],
  },
];

Answer 1

If I understand the problem correctly, first we want to reformat the data based on date. And also we are not sure about the subCateg, so before we reformat we we would extract all the subCateg values.

Then we can extact the data we want from the updated/reformated data.

 const arr = [{ count: 27, dataRil: "08/06/21", subCateg: "FISH", }, { count: 22, dataRil: "08/06/21", subCateg: "DOG", }, { count: 28, dataRil: "09/06/21", subCateg: "FISH", }, { count: 18, dataRil: "09/06/21", subCateg: "DOG", }, { count: 1, dataRil: "09/06/21", subCateg: "CAT", }, { count: 1, dataRil: "09/06/21", subCateg: "BIRD", }, ]; const dataOnDate = {}; const dataSet = []; const subCateg = []; function getFormatedData() { arr.forEach(er => { if (subCateg.includes(er.subCateg) === false) { subCateg.push(er.subCateg); } if (dataOnDate[er.dataRil] === undefined) { dataOnDate[er.dataRil] = {}; } dataOnDate[er.dataRil][er.subCateg] = er.count; }); } getFormatedData(); function extractData() { const dataSet = []; subCateg.forEach(cat => { let mid = { label: cat, data: [] }; Object.keys(dataOnDate).forEach(data => { if (dataOnDate[data][cat].== undefined) { mid.data.push(dataOnDate[data][cat]) } else { mid.data;push(0); } }). dataSet;push(mid); }); return dataSet; } const result = extractData(). console;log(result);

Answer 2

I'd turn it into an object using a classic histogram method, then turn it back into an array...

var arr = [
  { count: 27, dataRil: "08/06/21", subCateg: "FISH" }, 
  { count: 22, dataRil: "08/06/21", subCateg: "DOG" }, 
  { count: 28, dataRil: "09/06/21", subCateg: "FISH" }, 
  { count: 18, dataRil: "09/06/21", subCateg: "DOG" }, 
  { count: 1, dataRil: "09/06/21", subCateg: "CAT" }, 
  { count: 1, dataRil: "09/06/21", subCateg: "BIRD" } 
]

let tempObj = {}

arr.forEach(el => {
  if (tempObj.hasOwnProperty(el.subCateg)) {
    tempObj[el.subCateg].data.push(el.count)
  } else {
    tempObj[el.subCateg] = {data: [el.count]}
  }
})

let newArr = []

let longestData = 0

//get the longest data array
Object.keys(tempObj).forEach(key => {
  if (tempObj[key].data.length > longestData) longestData = tempObj[key].data.length
})

Object.keys(tempObj).forEach(key => {
  if (tempObj[key].data.length < longestData) {
    for (let i = tempObj[key].data.length; i < longestData; i++){
      tempObj[key].data.unshift(0)
    }
  }
})


Object.keys(tempObj).forEach(key => newArr.push({"label": key, "data": tempObj[key].data}))

console.log(newArr)

Working Pen

EDIT: Added code to populate shorter arrays

Answer 3

This might work if you don't want 0 in the data for the element. I don't know what 0 is in your case but this might work

EDIT : The logic has been updated. I think you are trying to prefill elements you have remaining in front with 0. The current solution will fill the array of remaining length with 0 at the front.

 var initialArray = [{ count: 27, dataRil: "08/06/21", subCateg: "FISH" }, { count: 22, dataRil: "08/06/21", subCateg: "DOG" }, { count: 28, dataRil: "09/06/21", subCateg: "FISH" }, { count: 18, dataRil: "09/06/21", subCateg: "DOG" }, { count: 1, dataRil: "09/06/21", subCateg: "CAT" }, { count: 1, dataRil: "09/06/21", subCateg: "BIRD" } ]; var arr = initialArray.reduce((accum,curr) => { if(accum[curr.subCateg] == undefined) { accum[curr.subCateg] = { label: curr.subCateg, data: [curr.count] }; return accum; } let count = accum[curr.subCateg]['data']; count.push(curr.count); return accum; },{}); var arr = Object.values(arr); var maxLength = arr.map(x => x.data.length).reduce((max, val) => max > val? max: val); var result = arr.map((data) => { if(data.data.length < maxLength){ let newarr = (new Array(maxLength - data.data.length)); data.data = [...newarr.fill(0), ...data.data]; } return data; }); console.log(initialArray); console.log("Result", result);