A guide on organizing an array of objects by a specific property using a separate array

Question

A guide on organizing an array of objects by a specific property using a separate array

Here is the array I am working with:

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 need to group this array by category and extract the counts into a new array. How can I accomplish this?

The desired output should be:

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

javascript arrays json

Answer 1

Answer №1

Upon analyzing the issue at hand, our primary objective is to reformat the data based on date and extract all sub-categories before proceeding with the reformatting process.

Once the initial steps are completed, we can then retrieve the desired data from the updated and reformatted dataset.

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

Upon analyzing the issue at hand, our primary objective is to reformat the data based on date and extract all sub-categories before proceeding with the reformatting process.

Once the initial steps are completed, we can then retrieve the desired data from the updated and reformatted dataset.

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 3

Answer №2

To transform it into an object, I utilized a traditional histogram technique before converting it back to an array...

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

let tempObj = {}

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

let newArr = []

let longestDataArrayLength = 0

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

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


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

console.log(newArr)

Interactive Code Editor

UPDATE: Included code to fill in shorter arrays

Answer 4

To transform it into an object, I utilized a traditional histogram technique before converting it back to an array...

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

let tempObj = {}

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

let newArr = []

let longestDataArrayLength = 0

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

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


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

console.log(newArr)

Interactive Code Editor

UPDATE: Included code to fill in shorter arrays

Answer 5

Answer №3

Perhaps this approach could be effective if you prefer not to have 0 in your data for the specific element. It's uncertain what significance 0 holds in your scenario, but this method may suit your needs.

UPDATE: The logic has undergone a revision. It appears that you intend to populate the remaining elements at the beginning with 0. The current solution involves filling the array of remaining length with 0 at the start.

    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);

Answer 6

Perhaps this approach could be effective if you prefer not to have 0 in your data for the specific element. It's uncertain what significance 0 holds in your scenario, but this method may suit your needs.

UPDATE: The logic has undergone a revision. It appears that you intend to populate the remaining elements at the beginning with 0. The current solution involves filling the array of remaining length with 0 at the start.

    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);

A guide on organizing an array of objects by a specific property using a separate array

Answer №1

Answer №2

Answer №3

Similar questions

Steps for formatting JSON objects for database storage with Node-orm2:

What is the process for configuring my form to automatically send to my email upon clicking the send button?

What is the best way to submit form data along with an image using Angular?

Perform a Brute Force Rotation of the Array to the Right by K positions

"Is it possible to use a Twitter widget with Mootools

Tips for managing the 'completed' button in an Android keyboard application using AngularJS/Ionic

How to format JSON using iisnode

Splitting data in NodeJS sockets

Perform a Selenium action to click on each individual HTML 'a' tag on

Redirecting script upon successful connection detection

Ways to include scrolling specifically for one template

Using Typescript to pass a property as one of the keys in an object's list of values

instructions for executing this javascript within the <p> tag

The issue persists with the addEventListener function not working multiple times

Utilize JQuery to Extract HTML Elements

JavaScript / html Error: function body missing closing curly brace

Error encountered while testing karma: subscription function is not recognized

Revamping array elements in React

Node.js and Express facing challenge with Stripe checkout functionality

Error Encountered with CakePHP Model when Parsing AJAX JSON Data