Organize the array by property name and include a tally for each group

Question

Organize the array by property name and include a tally for each group

My current data structure looks like this:

var data = [
   { MainHeader: Header1, SubHeader: 'one'},
   { MainHeader: Header1, SubHeader: 'two'},
   { MainHeader: Header2, SubHeader: 'three'},
   { MainHeader: Header2, SubHeader: 'four'},
   { MainHeader: Header2, SubHeader: 'five'}
];

I am looking to transform it into the following format:

var groupheaders = [
  { startColName: 'one', numberofCols: 2, title: Header1},
  { startColName: 'three', numberofCols: 3, title: Header2}
];

Does anyone know of a graceful solution to achieve this using Lodash?

javascript arrays underscore.js lodash

Answer 1

Answer №1

To streamline the process, consider using a mapping object where each MainHeader serves as a key. If a MainHeader is already present in the map, increment its count. Otherwise, add a new key with an associated object value.

Next, utilize the Object.values() function to extract the values into an array:

const data = [{MainHeader:"Header1",SubHeader:"one"},{MainHeader:"Header1",SubHeader:"two"},{MainHeader:"Header2",SubHeader:"three"},{MainHeader:"Header2",SubHeader:"four"},{MainHeader:"Header2",SubHeader:"five"}],
      map = {};

data.forEach(({ MainHeader, SubHeader }) => {
  if(map[MainHeader])
    map[MainHeader].numberofCols++
  else
    map[MainHeader] = { title: MainHeader, startColName: SubHeader, numberofCols: 1 };
})

let output = Object.values(map);

console.log(output)

For an ES5-compatible approach:

var data = [{MainHeader:"Header1",SubHeader:"one"},{MainHeader:"Header1",SubHeader:"two"},{MainHeader:"Header2",SubHeader:"three"},{MainHeader:"Header2",SubHeader:"four"},{MainHeader:"Header2",SubHeader:"five"}],
      map = {};

data.forEach(function(o) {
  if(map[o.MainHeader])
    map[o.MainHeader].numberofCols++
  else
    map[o.MainHeader] = { title: o.MainHeader, startColName: o.SubHeader, numberofCols: 1 };
})

var output = Object.keys(map).map(function(k) {
  return map[k];
});

console.log(output)

Answer 2

To streamline the process, consider using a mapping object where each MainHeader serves as a key. If a MainHeader is already present in the map, increment its count. Otherwise, add a new key with an associated object value.

Next, utilize the Object.values() function to extract the values into an array:

const data = [{MainHeader:"Header1",SubHeader:"one"},{MainHeader:"Header1",SubHeader:"two"},{MainHeader:"Header2",SubHeader:"three"},{MainHeader:"Header2",SubHeader:"four"},{MainHeader:"Header2",SubHeader:"five"}],
      map = {};

data.forEach(({ MainHeader, SubHeader }) => {
  if(map[MainHeader])
    map[MainHeader].numberofCols++
  else
    map[MainHeader] = { title: MainHeader, startColName: SubHeader, numberofCols: 1 };
})

let output = Object.values(map);

console.log(output)

For an ES5-compatible approach:

var data = [{MainHeader:"Header1",SubHeader:"one"},{MainHeader:"Header1",SubHeader:"two"},{MainHeader:"Header2",SubHeader:"three"},{MainHeader:"Header2",SubHeader:"four"},{MainHeader:"Header2",SubHeader:"five"}],
      map = {};

data.forEach(function(o) {
  if(map[o.MainHeader])
    map[o.MainHeader].numberofCols++
  else
    map[o.MainHeader] = { title: o.MainHeader, startColName: o.SubHeader, numberofCols: 1 };
})

var output = Object.keys(map).map(function(k) {
  return map[k];
});

console.log(output)

Organize the array by property name and include a tally for each group

Answer №1

Similar questions

Display my additional HTML content on the current page

Troubleshooting a Vue 2 component's prop receiving an incorrect value

Images displayed alongside webpage contents

Error message in Linux for NodeJS global NPM package: "File or directory does not exist"

Invoking an express route using JavaScript

Switch the background color of a list item according to a JSON search

Instructions on generating a fresh Ethereum or Solidity contract for every test using JavaScript and Truffle

Displaying a single row of a PHP array in bold formatting

Ensure that the assistant stays beneath the cursor while moving it

Is there a way to handle button click event when utilizing this.props.children in React?

What is the reasoning behind the return type of void for Window.open()?

Retrieve SQL data and store it in a JavaScript variable

Simplified jQuery function for multiple div mouseover operations

Tips for including a currency symbol before an input field using Material UI

Custom JSON filtering

Utilizing Angular partials within specific views with the assistance of ui-router

Exploring Vue.js3: Simplifying Nested Array Filtering

Does type conversion have a specific ranking of preference?

AngularJS - how to dynamically delete a directive from an element

Transform the characters within a string into corresponding numerical values, calculate the total sum, and finally display both the sum and the original string