Dividing an array into categories with typescript/javascript

Question

Dividing an array into categories with typescript/javascript

Here is the initial structure I have:

    products = [
       {
         'id': 1
         'name: 'test'
       },
       {
         'id': 2
         'name: 'test'
       },
       {
         'id': 3
         'name: 'test'
       }
       ... etc, etc
    ]

This is what I need it to look like after restructuring:

    products = [
       row1: [
        {
         'id': 1
         'name: 'test'
        },
        {
         'id': 2
         'name: 'test'
        },
        {
         'id': 3
         'name: 'test'
        },
        {
         'id': 4
         'name: 'test'
        }
       ]
    row2: [
       {
         'id': 5
         'name: 'test'
        },
        {
         'id': 6
         'name: 'test'
        },
        {
         'id': 7
         'name: 'test'
        },
        {
         'id': 8
         'name: 'test'
        }
       ]
       row3: [.. etc, etc
    ]

The challenge lies in dynamically setting the number of objects in each group based on a variable (in this example, the variable would be 4).

Is there a way to accomplish this using Typescript/Javascript? It's been quite frustrating!

Thank you

javascript arrays json typescript

Answer 1

Answer №1

When it comes to organizing data, the concept of chunking is key. This method differs from grouping, as it disregards the content of each item in favor of structuring them into chunks efficiently. While some suggest using Object.groupBy() or Array.prototype.reduce() to group items, a more efficient approach is to utilize chunking.

Option A: Simplified Chunking/Translation Approach

The most expedient option involves iterating through the array by chunk size and extracting subsets along the way:

function chunkAndTranslate(array, chunkSize) { 
  // Create an object for storing named properties such as row1, row2, ...rowN
  const output = {}, 
  // Store array.length
  arrayLength = array.length;
  // Loop variables
  let arrayIndex = 0, chunkOrdinal = 1;
  // Loop over chunks
  while (arrayIndex < arrayLength) {
    // Use slice() to extract a chunk. Note the incrementing/assignment operations.
    output[`row${chunkOrdinal++}`] = array.slice(arrayIndex, arrayIndex += chunkSize);
  }
  return output;
}
// Testing with a simple demo array
console.table(chunkAndTranslate([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 4));

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><style>.as-console-wrapper{display:block}</style><script>console.config({timeStamps:false,maximize:true})</script>

This method offers distinct advantages over using reduce() and Object.groupBy(). It:

Proceeds by chunk size rather than unit-by-unit, reducing the number of iterations required.
Eliminates the need for extensive logic or calculations for every index, as individual item content is ignored.
Declares each rowN property only once, without constant validation checks.

Utilizes the built-in

Array.prototype.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" rel="nofollow noreferrer">slice()</a>

function for selecting subsets instead of adding items individually and resizing the chunk array repeatedly.

Option B: Pre-chunk followed by Reduction

An alternate approach involves separating chunking and translation processes. By implementing a reusable Array.prototype.chunk() method and then applying

Array.prototype.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" rel="nofollow noreferrer">reduce()</a>

on the resulting two-dimensional array, we can enhance efficiency beyond Option A under certain input conditions:

if (!Array.prototype.hasOwnProperty("chunk")) {
  Object.defineProperty(Array.prototype, "chunk", {
    enumerable: false,
    value: function(size) {
      // Cache array.length
      const length = this.length;
      // Initialize output array size to avoid pushing/resizing
      const output = new Array(Math.ceil(length / size));
      // Loop variables
      let seekIndex = 0,
        outputIndex = 0;
      // Iterate over chunks
      while (seekIndex < length) {
        // Extract a chunk using slice(). Note the incrementing/assignment operations.
        output[outputIndex++] = this.slice(seekIndex, seekIndex += size);
      }
      // Return the chunks
      return output;
    }
  });
}

console.table(
  // Sample test using a basic array
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  // Split into chunks
  .chunk(4)
  // Reduce for desired object structure
  .reduce((output, chunk, index) => {
    output[`row${index + 1}`] = chunk;
    return output;
  }, {})
);

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><style>.as-console-wrapper{display:block}</style><script>console.config({timeStamps:false,maximize:true})</script>

A jsbench comparison with chunk size of 25 and input length of 99 showcases performance disparities between options A, B, and other approaches presented in different answers. Interestingly, the supposedly superior reduce answer actually proves least effective due to inefficiencies when dealing with items disregarding content:

Solution	Ops/s	Relative Speed Compared to Fastest
Option A: while + slice	1,300,000	fastest
Option B: chunk → reduce	1,100,000	21% slower
Object.groupBy	71,000	95% slower
reduce	57,000	96% slower

Experiment with varied input data or chunk sizes via the provided test link.

Answer 2

When it comes to organizing data, the concept of chunking is key. This method differs from grouping, as it disregards the content of each item in favor of structuring them into chunks efficiently. While some suggest using Object.groupBy() or Array.prototype.reduce() to group items, a more efficient approach is to utilize chunking.

Option A: Simplified Chunking/Translation Approach

The most expedient option involves iterating through the array by chunk size and extracting subsets along the way:

function chunkAndTranslate(array, chunkSize) { 
  // Create an object for storing named properties such as row1, row2, ...rowN
  const output = {}, 
  // Store array.length
  arrayLength = array.length;
  // Loop variables
  let arrayIndex = 0, chunkOrdinal = 1;
  // Loop over chunks
  while (arrayIndex < arrayLength) {
    // Use slice() to extract a chunk. Note the incrementing/assignment operations.
    output[`row${chunkOrdinal++}`] = array.slice(arrayIndex, arrayIndex += chunkSize);
  }
  return output;
}
// Testing with a simple demo array
console.table(chunkAndTranslate([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 4));

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><style>.as-console-wrapper{display:block}</style><script>console.config({timeStamps:false,maximize:true})</script>

This method offers distinct advantages over using reduce() and Object.groupBy(). It:

Proceeds by chunk size rather than unit-by-unit, reducing the number of iterations required.
Eliminates the need for extensive logic or calculations for every index, as individual item content is ignored.
Declares each rowN property only once, without constant validation checks.

Utilizes the built-in

Array.prototype.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" rel="nofollow noreferrer">slice()</a>

function for selecting subsets instead of adding items individually and resizing the chunk array repeatedly.

Option B: Pre-chunk followed by Reduction

An alternate approach involves separating chunking and translation processes. By implementing a reusable Array.prototype.chunk() method and then applying

Array.prototype.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" rel="nofollow noreferrer">reduce()</a>

on the resulting two-dimensional array, we can enhance efficiency beyond Option A under certain input conditions:

if (!Array.prototype.hasOwnProperty("chunk")) {
  Object.defineProperty(Array.prototype, "chunk", {
    enumerable: false,
    value: function(size) {
      // Cache array.length
      const length = this.length;
      // Initialize output array size to avoid pushing/resizing
      const output = new Array(Math.ceil(length / size));
      // Loop variables
      let seekIndex = 0,
        outputIndex = 0;
      // Iterate over chunks
      while (seekIndex < length) {
        // Extract a chunk using slice(). Note the incrementing/assignment operations.
        output[outputIndex++] = this.slice(seekIndex, seekIndex += size);
      }
      // Return the chunks
      return output;
    }
  });
}

console.table(
  // Sample test using a basic array
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  // Split into chunks
  .chunk(4)
  // Reduce for desired object structure
  .reduce((output, chunk, index) => {
    output[`row${index + 1}`] = chunk;
    return output;
  }, {})
);

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><style>.as-console-wrapper{display:block}</style><script>console.config({timeStamps:false,maximize:true})</script>

A jsbench comparison with chunk size of 25 and input length of 99 showcases performance disparities between options A, B, and other approaches presented in different answers. Interestingly, the supposedly superior reduce answer actually proves least effective due to inefficiencies when dealing with items disregarding content:

Solution	Ops/s	Relative Speed Compared to Fastest
Option A: while + slice	1,300,000	fastest
Option B: chunk → reduce	1,100,000	21% slower
Object.groupBy	71,000	95% slower
reduce	57,000	96% slower

Experiment with varied input data or chunk sizes via the provided test link.

Answer 3

Answer №2

Utilize the power of Array.reduce()

To organize your products into groups, you can use the .reduce() method on the products array:

var products = [
   { 'id': 1, name: 'test' },
   { 'id': 2, name: 'test' },
   { 'id': 3, name: 'test' },
   { 'id': 4, name: 'test' },
   { 'id': 5, name: 'test'  },
   { 'id': 6, name: 'test' }
]

var numberOfObjects = 4 // <-- specify number of objects in each group

var groupedProducts = products.reduce((acc, elem, index) => {
  var rowNum = Math.floor(index/numberOfObjects) + 1
  acc[`row${rowNum}`] = acc[`row${rowNum}`] || []
  acc[`row${rowNum}`].push(elem)
  return acc
}, {})

console.log(groupedProducts)

Answer 4

Utilize the power of Array.reduce()

To organize your products into groups, you can use the .reduce() method on the products array:

var products = [
   { 'id': 1, name: 'test' },
   { 'id': 2, name: 'test' },
   { 'id': 3, name: 'test' },
   { 'id': 4, name: 'test' },
   { 'id': 5, name: 'test'  },
   { 'id': 6, name: 'test' }
]

var numberOfObjects = 4 // <-- specify number of objects in each group

var groupedProducts = products.reduce((acc, elem, index) => {
  var rowNum = Math.floor(index/numberOfObjects) + 1
  acc[`row${rowNum}`] = acc[`row${rowNum}`] || []
  acc[`row${rowNum}`].push(elem)
  return acc
}, {})

console.log(groupedProducts)

Answer 5

Answer №3

An innovative implementation of Object.groupBy is now available in pre-release versions of major browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

This could potentially become the preferred method for solving this issue in the time to come.

Here is an example usage (not tested and may not work unless using a prelease version...):

  const products = [
       {
         'id': 1,
         'name': 'test1'
       },
       {
         'id': 2,
         'name': 'test2'
       },
       {
         'id': 3,
         'name': 'test3'
       },
       {
         'id': 4,
         'name': 'test4'
       },
       {
         'id': 5,
         'name': 'test5'
       },
    ]
    
const columnsPerRow = 3;    

const table = Object.groupBy(products,(p,index)=>{
  return `row${Math.floor(index/columnsPerRow)}`
  })
  
console.log(table)

Answer 6

An innovative implementation of Object.groupBy is now available in pre-release versions of major browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

This could potentially become the preferred method for solving this issue in the time to come.

Here is an example usage (not tested and may not work unless using a prelease version...):

  const products = [
       {
         'id': 1,
         'name': 'test1'
       },
       {
         'id': 2,
         'name': 'test2'
       },
       {
         'id': 3,
         'name': 'test3'
       },
       {
         'id': 4,
         'name': 'test4'
       },
       {
         'id': 5,
         'name': 'test5'
       },
    ]
    
const columnsPerRow = 3;    

const table = Object.groupBy(products,(p,index)=>{
  return `row${Math.floor(index/columnsPerRow)}`
  })
  
console.log(table)

Answer 7

Answer №4

Lodash groupBy function is quite useful as it allows you to group entries in an array based on a specified iterator function. The logic behind the grouping can be achieved by tracking the index of each iteration and increasing the group count when the modulo operator yields zero.

For instance, consider this example:


const { groupBy } = require("lodash");

const products = [
  { id: "1", name: "test" },
  { id: "2", name: "test" },
  { id: "3", name: "test" },
  { id: "4", name: "test" },
  { id: "5", name: "test" },
  { id: "6", name: "test" },
  { id: "7", name: "test" },
  { id: "8", name: "test" },
];
const myGroupingFunction = (val) => {
  ++index;
  const groupLabel = "row" + groupCount;
  if (index % groupSize === 0) {
    ++groupCount;
  }
  return groupLabel;
};

const groupSize = 2;
let groupCount = 1;
let index = 0;
const groupedEntries = groupBy(products, myGroupingFunction);

console.log("GroupedEntries: ", groupedEntries);


// GroupedEntries:  {
//  row1: [ { id: '1', name: 'test' }, { id: '2', name: 'test' } ],
//  row2: [ { id: '3', name: 'test' }, { id: '4', name: 'test' } ],
//  row3: [ { id: '5', name: 'test' }, { id: '6', name: 'test' } ],
//  row4: [ { id: '7', name: 'test' }, { id: '8', name: 'test' } ]
//}

This method will loop through a list, categorizing the items into evenly sized groups determined by the groupSize variable, maintaining their original sequence.

If preferred, the grouping number could also be calculated based on object properties within the array. In this case, I opted for incrementing an index instead.

https://lodash.com/docs/4.17.15#groupBy

Answer 8

Lodash groupBy function is quite useful as it allows you to group entries in an array based on a specified iterator function. The logic behind the grouping can be achieved by tracking the index of each iteration and increasing the group count when the modulo operator yields zero.

For instance, consider this example:


const { groupBy } = require("lodash");

const products = [
  { id: "1", name: "test" },
  { id: "2", name: "test" },
  { id: "3", name: "test" },
  { id: "4", name: "test" },
  { id: "5", name: "test" },
  { id: "6", name: "test" },
  { id: "7", name: "test" },
  { id: "8", name: "test" },
];
const myGroupingFunction = (val) => {
  ++index;
  const groupLabel = "row" + groupCount;
  if (index % groupSize === 0) {
    ++groupCount;
  }
  return groupLabel;
};

const groupSize = 2;
let groupCount = 1;
let index = 0;
const groupedEntries = groupBy(products, myGroupingFunction);

console.log("GroupedEntries: ", groupedEntries);


// GroupedEntries:  {
//  row1: [ { id: '1', name: 'test' }, { id: '2', name: 'test' } ],
//  row2: [ { id: '3', name: 'test' }, { id: '4', name: 'test' } ],
//  row3: [ { id: '5', name: 'test' }, { id: '6', name: 'test' } ],
//  row4: [ { id: '7', name: 'test' }, { id: '8', name: 'test' } ]
//}

This method will loop through a list, categorizing the items into evenly sized groups determined by the groupSize variable, maintaining their original sequence.

If preferred, the grouping number could also be calculated based on object properties within the array. In this case, I opted for incrementing an index instead.

https://lodash.com/docs/4.17.15#groupBy

Answer 9

Answer №5

This code snippet will provide the precise solution you seek:

const groupedProducts = {}
products.map((product, idx) => {
  const rowKey = `row${Math.floor(idx / 4) + 1}`
  if (!groupedProducts[rowKey]) groupedProducts[rowKey] = []
  return groupedProducts[rowKey].push(product)
})

Answer 10

This code snippet will provide the precise solution you seek:

const groupedProducts = {}
products.map((product, idx) => {
  const rowKey = `row${Math.floor(idx / 4) + 1}`
  if (!groupedProducts[rowKey]) groupedProducts[rowKey] = []
  return groupedProducts[rowKey].push(product)
})

Dividing an array into categories with typescript/javascript

Answer №1

Option A: Simplified Chunking/Translation Approach

Option B: Pre-chunk followed by Reduction

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

Glistening: sending reactiveValues to conditionalPanel

How can we ensure that Protractor's ElementArrayFinder 'each' function pauses until the current action has finished before moving on to the next iteration?

JSON Serialization Results Include a Property for Counting

Is there a way to update a useState in TabPanel without causing a re-render?

retrieving data from Redis with the help of Node.js

Maintain the webpage content even after submitting a form with a file attachment on the same page

Having trouble with a JavaScript element not responding to clicks when displayed inline?

Creating a Universal Resolver in Angular (2+) - A Step-by-Step Guide

What is the best way to determine the value of a variable specific to my scenario?

The CSS selectors wrapped in jQuery vary between Chrome and Internet Explorer 11

Why Mixin Class inference is not supported in Typescript

What is the best way to handle parsing a JSON object in a single response?

Upon clicking a button, I aim to retrieve the data from the rows that the user has checked. I am currently unsure of how to iterate through the rows in my mat-table

Is it true that all events in JavaScript go through capturing and bubbling phases?

Vuejs fails to properly transmit data

The createElement function in Vue.js does not always return a fully formed component

The NativeAppEventEmitter does not return any value

Error: Found an unconventional token "e" in JSON data at position 1 during parsing in JSON.parse function

Getting the Request Body Content in Express Middleware