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

Calculate and retrieve the result from the event handling function

Css shaky letters transformation

Leveraging orWhere in the bookshelf JavaScript object

Convert an array to UTF-8 encoding and extract the values into a text input field

Integrating a parameter into a plugin allows for displaying a specified number of elements in the output

Conflicting Angular components: Sorting tables and dragging/dropping table rows

Using electron cookies in Angular involves integrating Electron's native cookie functionality into an

What is the best way to retrieve a JSP parameter dynamically or how can one create a JSP parameter on the

Combining the functionality of a click event

Swipe to eliminate an element in Ruby on Rails

unable to establish connection due to port error in node.js

Invoke a Google Apps Script through AJAX that necessitates authentication

Tips for sending JSON data from JavaScript to PHP servers

Passing data from a card component to a tab component in ReactJS

What is the best way to eliminate a specific element from a JavaScript array?

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

Utilize moment.js to format a datetime and display the corresponding timezone

I wonder what the response would be to this particular inquiry

The latest URL is not launching in a separate tab

What is the proper way to send properties to a component that is enclosed within a Higher Order Component?