What is the best way to divide an array of objects into three separate parts using JavaScript?

Question

What is the best way to divide an array of objects into three separate parts using JavaScript?

I am looking to arrange an array of objects in a specific order:

The first set should include objects where the favorites array contains only one item. The second set should display objects where the favorites array is either undefined or empty. The third set should consist of objects with more than one item in the favorites array.

Here is how the array of objects is structured:

[
{
rentalName:
rentalAddress:
favorites:[]
...
}
]

I came across a similar solution but it does not cater to the sorting requirement mentioned above:

function sortBy(selector) {
  const cmp = (a, b) => (selector(a) - selector(b));
  return list => list.sort(cmp);
}

const data = [{ rentalName: "Foo", favorites:[{}, {}, {}] }, { rentalName: "Bar", favorites:[{}] }, { rentalName: "Baz", favoriteslikes:[{}] }, { Name: "Plugh", favorites:[] }];

const sortByLikes = sortBy(({ favorites }) => favorites.length);

console.log(sortByLikes(data));

Is there a way to sort the array of objects into three parts as described earlier?

javascript arrays ecmascript-6 javascript-objects ecmascript-5

Answer 1

Answer №1

This code snippet is not about sorting elements, instead it focuses on categorizing them into different groups.

To achieve this, a forEach loop is used to iterate through an array of objects and place each object into a specific array based on a certain condition.

function groupByFavorites(array) {
    let result = {
        none: [],
        one: [],
        multiple: []
    };
    array.forEach(o => {
        if (!o.favorites) { // If favorites property is undefined or empty
            result.none.push(o);
        } else if (o.favorites.length == 1) {
            result.one.push(o);
        } else {
            result.multiple.push(o);
        }
        return result;
    });
}

Answer 2

This code snippet is not about sorting elements, instead it focuses on categorizing them into different groups.

To achieve this, a forEach loop is used to iterate through an array of objects and place each object into a specific array based on a certain condition.

function groupByFavorites(array) {
    let result = {
        none: [],
        one: [],
        multiple: []
    };
    array.forEach(o => {
        if (!o.favorites) { // If favorites property is undefined or empty
            result.none.push(o);
        } else if (o.favorites.length == 1) {
            result.one.push(o);
        } else {
            result.multiple.push(o);
        }
        return result;
    });
}

Answer 3

Answer №2

To prioritize cases in sorting, assign a numerical value to each case and subtract the values when comparing them.

function customSort() {
  const getPriority = ({favorites})=>favorites?.length === 1 ? 0 : !favorites?.length ? 1 : 2;
  const compare = (a, b) => (getPriority(a) - getPriority(b));
  return list => list.sort(compare);
}

const info = [{ rentalName: "Foo", favorites:[{}, {}, {}] }, { rentalName: "Bar", favorites:[{}] }, { rentalName: "Baz", favoriteslikes:[{}] }, { Name: "Plugh", favorites:[] }];

const sortedData = customSort();

console.log(sortedData(info));

Answer 4

To prioritize cases in sorting, assign a numerical value to each case and subtract the values when comparing them.

function customSort() {
  const getPriority = ({favorites})=>favorites?.length === 1 ? 0 : !favorites?.length ? 1 : 2;
  const compare = (a, b) => (getPriority(a) - getPriority(b));
  return list => list.sort(compare);
}

const info = [{ rentalName: "Foo", favorites:[{}, {}, {}] }, { rentalName: "Bar", favorites:[{}] }, { rentalName: "Baz", favoriteslikes:[{}] }, { Name: "Plugh", favorites:[] }];

const sortedData = customSort();

console.log(sortedData(info));

What is the best way to divide an array of objects into three separate parts using JavaScript?

Answer №1

Answer №2

Similar questions

Is it better to define a function within useEffect or externally?

Is it possible to send props to a component within the render method?

Authenticating with passportjs using a Google Apps email address for verification

Unable to retrieve the sum total of all product items and display it in the designated text element

Tips on deleting specific elements from an array by utilizing the splice method

The issue of React Js's inline style malfunctioning when using a loop condition

Retrieving the response data from a jQuery AJAX call prior to executing the success function

Unable to establish a connection with the TCP server on CloudFoundry, although the localhost node.js is functioning properly

Challenges with MongoDB related to race conditions or concurrency problems

Modifying child text in React when hovering over a button

Using the `strpos` function in PHP with an array as the needle

Tips on keeping a div element in a fixed position until triggered by jQuery

Guide on utilizing the where clause to validate the presence of a value in an array within a PostgreSQL database

php and javascript

Looking to create a chat room on Google App Engine? Are there any demonstrations or examples available?

"Seamlessly Integrating AngularJS with WebGL for Stunning Canvas Inter

React: When an array state is controlling my components, why aren't they re-rendering?

What is the best way to save a string for future use in Angular after receiving it from a POST request API?

group items into ranges based on property of objects

Safari has trouble with AJAX cross-origin requests, while Chrome and Firefox handle them without issue