Sort the array elements by a specific property while preserving the original order of the array

Question

Sort the array elements by a specific property while preserving the original order of the array

I created a function that can group an array by one or more properties:

var groupBy = function (fields, data) {
    var groups = {};
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var container = groups;
        for (var j = 0; j < fields.length; j++) {
            var groupField = fields[j];
            var groupName = item[groupField];
            if (!container[groupName]) {
                container[groupName] = j < fields.length - 1 ? {} : [];
            }
            container = container[groupName];
        }
        container.push(item);
    }
    return groups;
};

For instance, when I use this sample input

var animals = [
    {type: "cat", name: "Max"},
    {type: "dog", name: "Charlie"},
    {type: "cat", name: "Zoe"},
    {type: "dog", name: "Abby"},
    {type: "cat", name: "Molly"}
];

var groupedAnimals = groupBy(["type"], animals);

The output looks like:

{
    "cat": [
        {
            "type": "cat",
            "name": "Max"
        },
        {
            "type": "cat",
            "name": "Zoe"
        },
        {
            "type": "cat",
            "name": "Molly"
        }
    ],
    "dog": [
        {
            "type": "dog",
            "name": "Charlie"
        },
        {
            "type": "dog",
            "name": "Abby"
        }
    ]
}

Everything is functioning correctly so far...but the issue arises when I need the keys to mirror the original order of the input-array. Since JS objects do not guarantee order, how can I ensure the correct order?

Update:

It seems like the desired result should be:

groupBy(["type", "name"], animals)

which would result in:

[
  {
    "group": "cat",
    "items": [
      {
        "group": "max",
        "items": [
          {
            "type": "cat",
            "name": "Max"
          }
        ]
      },
      {
        "group": "Zoe",
        "items": [
          {
            "type": "cat",
            "name": "Zoe"
          }
        ]
      },
      {
        "group": "Molly",
        "items": [
          {
            "type": "cat",
            "name": "Molly"
          }
        ]
      }
    ]
  },
  {
    "group": "dog",
    "items": [
      {
        "group": "Charlie",
        "items": [
          {
            "type": "dog",
            "name": "Charlie"
          }
        ]
      },
      {
        "group": "Abby",
        "items": [
          {
            "type": "dog",
            "name": "Abby"
          }
        ]
      }
    ]
  }
]

javascript arrays sorting grouping

Answer 1

Answer №1

If you're looking to create a versatile function to group keys and levels dynamically, this approach might be of interest to you.

The concept involves utilizing a hash table along with an array structure for each level.

function customizeGrouping(keys, array) {
    var result = [];
    array.forEach(function (a) {
        keys.reduce(function (r, k) {
            if (!r[a[k]]) {
                r[a[k]] = { _: [] };
                r._.push({ group: a[k], items: r[a[k]]._ });
            }
            return r[a[k]];
        }, this)._.push(a);
    }, { _: result });
    return result;
}

var animals = [{ type: "cat", name: "Max" }, { type: "dog", name: "Charlie" }, { type: "cat", name: "Zoe" }, { type: "dog", name: "Abby" }, { type: "cat", name: "Molly" }];

console.log(customizeGrouping(["type", "name"], animals));
console.log(customizeGrouping(["type"], animals));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you're looking to create a versatile function to group keys and levels dynamically, this approach might be of interest to you.

The concept involves utilizing a hash table along with an array structure for each level.

function customizeGrouping(keys, array) {
    var result = [];
    array.forEach(function (a) {
        keys.reduce(function (r, k) {
            if (!r[a[k]]) {
                r[a[k]] = { _: [] };
                r._.push({ group: a[k], items: r[a[k]]._ });
            }
            return r[a[k]];
        }, this)._.push(a);
    }, { _: result });
    return result;
}

var animals = [{ type: "cat", name: "Max" }, { type: "dog", name: "Charlie" }, { type: "cat", name: "Zoe" }, { type: "dog", name: "Abby" }, { type: "cat", name: "Molly" }];

console.log(customizeGrouping(["type", "name"], animals));
console.log(customizeGrouping(["type"], animals));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

To modify your function slightly, consider incorporating a unique property at each group level that specifies the order of keys for iteration:

var groupBy = function (fields, data) {
    var groups = { _keys: [] };
    //             ^^^^^^^^^
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var container = groups;
        for (var j = 0; j < fields.length; j++) {
            var groupField = fields[j];
            var groupName = item[groupField];
            if (!container[groupName]) {
                container[groupName] = j < fields.length - 1 ? { _keys: [] } : [];
    //                                                           ^^^^^^^^^
                container._keys.push(groupName);
    //          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            }
            container = container[groupName];
        }
        container.push(item);
    }
    return groups;
};

var animals = [
    {type: "cat", name: "Max"},
    {type: "dog", name: "Charlie"},
    {type: "cat", name: "Zoe"},
    {type: "dog", name: "Abby"},
    {type: "cat", name: "Molly"}
];

var groupedAnimals = groupBy(["type"], animals);

console.log(groupedAnimals);

// Output types in order:
console.log('output types in fixed order:');
groupedAnimals._keys.forEach(function (key, i) {
    console.log(i, key, groupedAnimals[key]);
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

To modify your function slightly, consider incorporating a unique property at each group level that specifies the order of keys for iteration:

var groupBy = function (fields, data) {
    var groups = { _keys: [] };
    //             ^^^^^^^^^
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var container = groups;
        for (var j = 0; j < fields.length; j++) {
            var groupField = fields[j];
            var groupName = item[groupField];
            if (!container[groupName]) {
                container[groupName] = j < fields.length - 1 ? { _keys: [] } : [];
    //                                                           ^^^^^^^^^
                container._keys.push(groupName);
    //          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            }
            container = container[groupName];
        }
        container.push(item);
    }
    return groups;
};

var animals = [
    {type: "cat", name: "Max"},
    {type: "dog", name: "Charlie"},
    {type: "cat", name: "Zoe"},
    {type: "dog", name: "Abby"},
    {type: "cat", name: "Molly"}
];

var groupedAnimals = groupBy(["type"], animals);

console.log(groupedAnimals);

// Output types in order:
console.log('output types in fixed order:');
groupedAnimals._keys.forEach(function (key, i) {
    console.log(i, key, groupedAnimals[key]);
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

If you want to maintain the order of your result data structure, consider converting it to an array of arrays.

var animals = [
 {type: "cat", name: "Max"},
 {type: "dog", name: "Charlie"},
 {type: "cat", name: "Zoe"},
 {type: "dog", name: "Abby"},
 {type: "cat", name: "Molly"}
];

var result = []
animals.forEach(function(e) {
  if(!this[e.type]) {
    this[e.type] = [e.type, []]
    result.push(this[e.type])
  }
  this[e.type][1].push(e)
}, {})

console.log(result)

If you need to group by multiple fields, you can provide an array as the first parameter to your function.

var animals = [
 {type: "cat", name: "Max", i: 2},
 {type: "dog", name: "Charlie", i: 2},
 {type: "cat", name: "Zoe", i: 2},
 {type: "dog", name: "Abby", i: 1},
 {type: "cat", name: "Molly", i: 2}
];

function groupBy(fields, data) {
  var result = []
  data.forEach(function(e) {
    var group = fields.map(a => e[a]).join('-')

    if (!this[group]) {
      this[group] = [group, []]
      result.push(this[group])
    }
    this[group][1].push(e)
  }, {})
  return result
}

console.log(groupBy(['type', 'i'], animals))

Answer 6

If you want to maintain the order of your result data structure, consider converting it to an array of arrays.

var animals = [
 {type: "cat", name: "Max"},
 {type: "dog", name: "Charlie"},
 {type: "cat", name: "Zoe"},
 {type: "dog", name: "Abby"},
 {type: "cat", name: "Molly"}
];

var result = []
animals.forEach(function(e) {
  if(!this[e.type]) {
    this[e.type] = [e.type, []]
    result.push(this[e.type])
  }
  this[e.type][1].push(e)
}, {})

console.log(result)

If you need to group by multiple fields, you can provide an array as the first parameter to your function.

var animals = [
 {type: "cat", name: "Max", i: 2},
 {type: "dog", name: "Charlie", i: 2},
 {type: "cat", name: "Zoe", i: 2},
 {type: "dog", name: "Abby", i: 1},
 {type: "cat", name: "Molly", i: 2}
];

function groupBy(fields, data) {
  var result = []
  data.forEach(function(e) {
    var group = fields.map(a => e[a]).join('-')

    if (!this[group]) {
      this[group] = [group, []]
      result.push(this[group])
    }
    this[group][1].push(e)
  }, {})
  return result
}

console.log(groupBy(['type', 'i'], animals))

Sort the array elements by a specific property while preserving the original order of the array

Answer №1

Answer №2

Answer №3

Similar questions

Traversing a JavaScript class within a for loop

The find function within $(this) is malfunctioning

What's the best way to display alert messages using the alert method in Node.js with Jade?

successive ajax requests

What is the best way to extract information from a JSON object?

Angular2-starter configuration setup with environment-based variables (such as .env or .conf) for testing and production settings

Encountering the error message "handleChange is not a function" when trying to select a date in Material UI

Creating a functional hyperlink within a ui-sref element in Ionic

Having trouble with setting up local notifications in React Native's scheduling feature?

How can you create an array in JavaScript?

Using Regex to replace special characters in TypeScript

jquery is in motion while svg paths are at a standstill, waiting to

Generate a JSON object based on the request.body information

I desire to alter the description of an item within a separate div, specifically in a bootstrap

Distinct sequence of whole numbers

arranges the letters in string C in alphabetical order

What steps can I take to prompt this function to modify the value of my input?

Converting image bytes to base64 in React Native: A step-by-step guide

Capture the 'value' of the button when clicked using ReactJS

Is it appropriate to use a component inside an entry component?