In JavaScript, convert an array of objects into an array of arrays of objects, effectively grouping the objects together

Question

In JavaScript, convert an array of objects into an array of arrays of objects, effectively grouping the objects together

How can I convert an array of objects into an array of arrays of objects? The goal is to group the objects in the original array based on specific criteria. Objects that are similar according to these criteria will be placed inside a subarray, which becomes an element of the new array.

I am struggling with inserting an initial empty array, which should not be included, and managing temporary states of subarrays along with temporary variables used as criteria.

What am I overlooking here? Is there a more concise, perhaps less procedural, and more functional approach to accomplishing this?

const transformArray = function (array) {
            let rows = [];
            let parts = [];
            let lastDay = null;
            let i = 0;
            array.forEach(function(item) {
                let currentDay = new Date(item.dt_text).getDay();
                if (currentDay !== lastDay) {
                    // Not in the same day row
                    rows.push(parts);
                    parts = [];
                    parts.push(item);

                    lastDay = currentDay;
                    i = rows.indexOf(parts);
                    return;
                } else if (currentDay === lastDay){
                    parts.push(item);
                    return;
                }
            });
            return rows;
  },

The sample data that this function handles is structured like this:

    [
      {
      "dt":1442275200,
      "main":{"temp":285.66,"temp_min":282.93,"temp_max":285.66,"pressure":899.08,"sea_level":1029.64,"grnd_level":899.08,"humidity":84,"temp_kf":2.73},
      "weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],
      "clouds":{"all":0},
      "wind":{"speed":1.18,"deg":34.0052},
      "rain":{},
      "sys":{"pod":"n"},
      "dt_text":"2015-09-15 00:00:00"
      },
      {
      "dt":1442275200,
      "main":{"temp":285.66,"temp_min":282.93,"temp_max":285.66,"pressure":899.08,"sea_level":1029.64,"grnd_level":899.08,"humidity":84,"temp_kf":2.73},
      "weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],
      "clouds":{"all":0},
      "wind":{"speed":1.18,"deg":34.0052},
      "rain":{},
      "sys":{"pod":"n"},
      "dt_text":"2015-09-15 00:00:00"
      },
      {
      "dt":1442228400,
      "main":{"temp":285.66,"temp_min":282.93,"temp_max":285.66,"pressure":899.08,"sea_level":1029.64,"grnd_level":899.08,"humidity":84,"temp_kf":2.73},
      "weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],
      "clouds":{"all":0},
      "wind":{"speed":1.18,"deg":34.0052},
      "rain":{},
      "sys":{"pod":"n"},
      "dt_text":"2015-09-14 00:00:00"
      }
    ]

javascript arrays javascript-objects

Answer 1

Answer №1

There are two different approaches to achieving this task. The reason for including the i tag and binding this is unclear, as they are not utilized in the code. Additionally, there seems to be a missing piece where the last row of items should be pushed onto the rows array.

Firstly, let's explore a method that adheres closely to your initial syntax:

var transform = function (array) {
    var rows = []; // array to hold rows
    var parts;     // placeholder array for parts
    var lastDay;   // variable to store last day
    array.forEach(function (item) {
        var currentDay = new Date(item.dt * 1000).getDay();
        if (currentDay !== lastDay) { 
            parts = [];
            rows.push(parts);
            parts.push(item);          
            lastDay = currentDay;
        } else {
            parts.push(item);         
        }
    });
    return rows;
}

Now, let's take a look at a more optimized approach:

var transform = function (array) {
    var rows = [];
    var row;
    var lastDay;
    array.forEach(function (item) {
        var currentDay = new Date(item.dt * 1000).getDay(); 
        if (currentDay !== lastDay) { 
            row = rows.push([item]) - 1;
            lastDay = currentDay;
        } else {
            rows[row].push(item);
        }
    });
    return rows;
}

Answer 2

There are two different approaches to achieving this task. The reason for including the i tag and binding this is unclear, as they are not utilized in the code. Additionally, there seems to be a missing piece where the last row of items should be pushed onto the rows array.

Firstly, let's explore a method that adheres closely to your initial syntax:

var transform = function (array) {
    var rows = []; // array to hold rows
    var parts;     // placeholder array for parts
    var lastDay;   // variable to store last day
    array.forEach(function (item) {
        var currentDay = new Date(item.dt * 1000).getDay();
        if (currentDay !== lastDay) { 
            parts = [];
            rows.push(parts);
            parts.push(item);          
            lastDay = currentDay;
        } else {
            parts.push(item);         
        }
    });
    return rows;
}

Now, let's take a look at a more optimized approach:

var transform = function (array) {
    var rows = [];
    var row;
    var lastDay;
    array.forEach(function (item) {
        var currentDay = new Date(item.dt * 1000).getDay(); 
        if (currentDay !== lastDay) { 
            row = rows.push([item]) - 1;
            lastDay = currentDay;
        } else {
            rows[row].push(item);
        }
    });
    return rows;
}

Answer 3

Answer №2

Your reasoning is solid.

However, you overlooked adding the row if all your data is from the same day.

To correct this, insert rows.push(parts) after the array.forEach() loop.

Additionally, here are some pointers:

Avoid binding array.forEach().bind(this).
Instead of checking for equality with empty array like parts != [], prefer checking its length using parts.length.

For a fixed version, check out this modified JSFiddle link.

Answer 4

Your reasoning is solid.

However, you overlooked adding the row if all your data is from the same day.

To correct this, insert rows.push(parts) after the array.forEach() loop.

Additionally, here are some pointers:

Avoid binding array.forEach().bind(this).
Instead of checking for equality with empty array like parts != [], prefer checking its length using parts.length.

For a fixed version, check out this modified JSFiddle link.

Answer 5

Answer №3

Utilizing Array.prototype.reduce can be an effective approach, especially if the array elements are already ordered according to element.dt, as you mentioned in your question:

function transform(array) {
    var groups = [[]];

    var lastItemForLastGroup = array.reduce(function (previous, current) {
        // continue population of the latest group
        groups[groups.length - 1].push(previous);

        if (previous.dt !== current.dt) {
            // add a new group
            groups.push([]);
        }

        // return current so that it will be `previous` in the next iteration
        return current;
    });

    groups[groups.length - 1].push(lastItemForLastGroup);

    return groups;
}

Though clear for those familiar with the reduce method, it might seem complex for others, potentially leading to the impression of overusing Array.prototype.reduce.

By using the provided test data:

var harry = [
    // group 0
    {
        "dt": 1442275200,
        "main": {"temp": 285.66, "temp_min": 282.93, "temp_max": 285.66, "pressure": 899.08, "sea_level": 1029.64, "grnd_level": 899.08, "humidity": 84, "temp_kf": 2.73},
       ...
    },
    ...
];

Executing transform(harry); results in 3 groups: the first group with two items, second group with three items, and third group with two items, fitting the expected outcome.

Answer 6

Utilizing Array.prototype.reduce can be an effective approach, especially if the array elements are already ordered according to element.dt, as you mentioned in your question:

function transform(array) {
    var groups = [[]];

    var lastItemForLastGroup = array.reduce(function (previous, current) {
        // continue population of the latest group
        groups[groups.length - 1].push(previous);

        if (previous.dt !== current.dt) {
            // add a new group
            groups.push([]);
        }

        // return current so that it will be `previous` in the next iteration
        return current;
    });

    groups[groups.length - 1].push(lastItemForLastGroup);

    return groups;
}

Though clear for those familiar with the reduce method, it might seem complex for others, potentially leading to the impression of overusing Array.prototype.reduce.

By using the provided test data:

var harry = [
    // group 0
    {
        "dt": 1442275200,
        "main": {"temp": 285.66, "temp_min": 282.93, "temp_max": 285.66, "pressure": 899.08, "sea_level": 1029.64, "grnd_level": 899.08, "humidity": 84, "temp_kf": 2.73},
       ...
    },
    ...
];

Executing transform(harry); results in 3 groups: the first group with two items, second group with three items, and third group with two items, fitting the expected outcome.

In JavaScript, convert an array of objects into an array of arrays of objects, effectively grouping the objects together

Answer №1

Answer №2

Answer №3

Similar questions

The component name "pages/product/_slug.vue" is invalid as it does not adhere to the valid custom element name specified in HTML5

Combining JWT authentication with access control lists: a comprehensive guide

Directive in AngularJS fails to trigger upon form reset

How to Utilize the Vue Instance With the 'this'

The flow union type operates smoothly without any errors occurring

D3 group of legendary elements

What is the best way to achieve the effect of "overflow: hidden" in three.js or WebGL?

A stylish method for converting CSV data into XML format using Node.js and Express

There are no markers or popups currently displayed on the map

restructure array upon alteration of data

How can I showcase a Google donut chart using an array of data in a React application?

Searching in the Kendo Dropdown List using text and value

Issue with fgetcsv() not properly handling newlines during conversion of CSV file to array

Integrate CKEditor with elFinder to allow for direct file uploads

Is it possible to execute a function when the AJAX request is successful and returns a status code of

Firebase web authentication is most effective upon the second attempt

NServicebus JavaScript message handler: Enhancing Communication

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

AngularJS faces issue with view not reflecting changes made to model

show a list of checkboxes that have been selected using JavaScript