Transforming an array into an object by applying filtering, prioritization, and minimizing loops

Question

Transforming an array into an object by applying filtering, prioritization, and minimizing loops

Consider the following array:

const array = [{
  typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome'
}, {
  typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour'
}, {
  typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour'
}]

The desired output should be:

{
  welcome: {
    landscape: ['Welcome'],
    portrait: ['Bonjour bonjour']
  }
}

To achieve this, we need to convert the array into an object structure like

{typeName: {orientation: value[]}}

, as shown below:

// This is NOT the final output, it's an intermediate step -- keep reading
{
  welcome: {
    landscape: ['Welcome', 'Bonjour'],
    portrait: ['Bonjour bonjour']
  }
}

However, there is a requirement for prioritization: if languageId=1 is present in the array, then ignore all other values with the same typeName and orientation. In the given example, only ['Welcome'] should be included since its languageId is 1, meaning 'Bonjour' can be ignored. If languageId=1 is missing, any value can be added (in this case, welcome.portrait).

The conversion process is straightforward using the .reduce() method as demonstrated by the code snippet provided.

However, dealing with prioritization while avoiding nested loops poses a challenge. The current solution involves filtering the array with an inner loop to check for conflicting types. While this works without issues, it may impact performance when handling large arrays.

Therefore, the main question remains: what is the most efficient approach to eliminate the need for inner loops?

javascript arrays algorithm filter reduce

Answer 1

Answer №1

If you want to prioritize certain items and avoid adding duplicates to the array, consider using a Set.

const
    array = [{ typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome' }, { typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour' }, { typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour' }],
    hasPrio = new Set,
    result = array.reduce((r, { typeName, orientation, languageId, value }) => {
        var key = `${typeName}|${orientation}`;

        if (!r[typeName]) r[typeName] = {};
        if (languageId === 1) {
            r[typeName][orientation] = [value];
            hasPrio.add(key);
        } else if (!hasPrio.has(key)) {
            if (!r[typeName][orientation]) r[typeName][orientation] = [];
            r[typeName][orientation].push(value);
        }
        return r;
    }, {});

console.log(result);

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

Answer 2

If you want to prioritize certain items and avoid adding duplicates to the array, consider using a Set.

const
    array = [{ typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome' }, { typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour' }, { typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour' }],
    hasPrio = new Set,
    result = array.reduce((r, { typeName, orientation, languageId, value }) => {
        var key = `${typeName}|${orientation}`;

        if (!r[typeName]) r[typeName] = {};
        if (languageId === 1) {
            r[typeName][orientation] = [value];
            hasPrio.add(key);
        } else if (!hasPrio.has(key)) {
            if (!r[typeName][orientation]) r[typeName][orientation] = [];
            r[typeName][orientation].push(value);
        }
        return r;
    }, {});

console.log(result);

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

Answer 3

Answer №2

To keep track of whether a languageId === 1 for a specific combination of typeName and orientation, you can utilize a Set. According to the specification, a Set is designed to have sublinear performance:

Set objects must be implemented using either hash tables or other mechanisms that, on average, provide access times that are sublinear on the number of elements in the collection.

Therefore, using a Set would offer better performance compared to an inner loop. You could also opt for an object if the keys are strings, as demonstrated below. If this approach is chosen, it's recommended to create the object with Object.create(null) to prevent inheritance from Object.prototype.

Instead of utilizing reduce, you can achieve the desired outcome with a single straightforward loop:

const array = [{
  typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome'
}, { typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Bon dia'
}, {
  typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour'
}, {
  typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour'
}]

const sawPriority = new Set();
const result = {};
for (const {typeName, orientation, languageId, value} of array) {
    const key = `${typeName}-${orientation}`;
    const isPriority = languageId === 1;
    let entry = result[typeName];
    if (!entry) {
        // No entry yet, easy peasy
        entry = result[typeName] = {[orientation]: [value]};
        if (isPriority) {
            sawPriority.add(key);
        }
    } else {
        const hasPriority = sawPriority.has(key);
        if (hasPriority === isPriority) {
            // Either the first for a new orientation, or a subsequent entry that
            // matches the priority
            const inner = entry[orientation];
            if (inner) {
                // Subsequent, add
                inner.push(value);
            } else {
                // First for orientation, create
                entry[orientation] = [value];
            }
        } else if (isPriority) {
            // It's a new priority entry, overwrite
            entry[orientation] = [value];
            sawPriority.add(key);
        }
    }
}

console.log(result)

(You mentioned in a comment that multiple entries where languageId === 1 should be aggregated into an array, so I have included a second one in the example above to showcase this functionality.)

In the provided code snippet, I'm comparing two boolean values like this:

if (hasPriority === isPriority) {

This comparison works because I am certain that both variables are indeed booleans, not just truthy or falsy values. This certainty arises from the fact that isPriority results from a strict equality comparison (===) and hasPriority comes from invoking the has method on a Set instance, which guarantees a boolean return value.

If there were any doubt regarding whether one of them might be a truthy or falsy value rather than explicitly true or false, I would ensure they are both booleans by adding ! before them in the comparison:

if (!hasPriority === !isPriority) {

Answer 4

To keep track of whether a languageId === 1 for a specific combination of typeName and orientation, you can utilize a Set. According to the specification, a Set is designed to have sublinear performance:

Set objects must be implemented using either hash tables or other mechanisms that, on average, provide access times that are sublinear on the number of elements in the collection.

Therefore, using a Set would offer better performance compared to an inner loop. You could also opt for an object if the keys are strings, as demonstrated below. If this approach is chosen, it's recommended to create the object with Object.create(null) to prevent inheritance from Object.prototype.

Instead of utilizing reduce, you can achieve the desired outcome with a single straightforward loop:

const array = [{
  typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome'
}, { typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Bon dia'
}, {
  typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour'
}, {
  typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour'
}]

const sawPriority = new Set();
const result = {};
for (const {typeName, orientation, languageId, value} of array) {
    const key = `${typeName}-${orientation}`;
    const isPriority = languageId === 1;
    let entry = result[typeName];
    if (!entry) {
        // No entry yet, easy peasy
        entry = result[typeName] = {[orientation]: [value]};
        if (isPriority) {
            sawPriority.add(key);
        }
    } else {
        const hasPriority = sawPriority.has(key);
        if (hasPriority === isPriority) {
            // Either the first for a new orientation, or a subsequent entry that
            // matches the priority
            const inner = entry[orientation];
            if (inner) {
                // Subsequent, add
                inner.push(value);
            } else {
                // First for orientation, create
                entry[orientation] = [value];
            }
        } else if (isPriority) {
            // It's a new priority entry, overwrite
            entry[orientation] = [value];
            sawPriority.add(key);
        }
    }
}

console.log(result)

(You mentioned in a comment that multiple entries where languageId === 1 should be aggregated into an array, so I have included a second one in the example above to showcase this functionality.)

In the provided code snippet, I'm comparing two boolean values like this:

if (hasPriority === isPriority) {

This comparison works because I am certain that both variables are indeed booleans, not just truthy or falsy values. This certainty arises from the fact that isPriority results from a strict equality comparison (===) and hasPriority comes from invoking the has method on a Set instance, which guarantees a boolean return value.

If there were any doubt regarding whether one of them might be a truthy or falsy value rather than explicitly true or false, I would ensure they are both booleans by adding ! before them in the comparison:

if (!hasPriority === !isPriority) {

Answer 5

Answer №3

Check out the interactive demonstration here

const data = [{
  typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome'
}, {
  typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour'
}, {
  typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour'
}];


let object = data.reduce( (accumulator, {orientation, value})=>{   
      accumulator[orientation] = (accumulator[orientation] || []).concat(value);
      return accumulator;
   }, {});

result = {};
result[data[0].typeName] = object;   
console.log(result);

Answer 6

Check out the interactive demonstration here

const data = [{
  typeName: 'welcome', orientation: 'landscape', languageId: 1, value: 'Welcome'
}, {
  typeName: 'welcome', orientation: 'landscape', languageId: 2, value: 'Bonjour'
}, {
  typeName: 'welcome', orientation: 'portrait', languageId: 2, value: 'Bonjour bonjour'
}];


let object = data.reduce( (accumulator, {orientation, value})=>{   
      accumulator[orientation] = (accumulator[orientation] || []).concat(value);
      return accumulator;
   }, {});

result = {};
result[data[0].typeName] = object;   
console.log(result);

Transforming an array into an object by applying filtering, prioritization, and minimizing loops

Answer №1

Answer №2

Answer №3

Similar questions

The route parameters seem to be malfunctioning when using the Google Maps Directions API

Assistance requested with Javascript for an HTML dropdown menu

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Tips for sharing a link using req.flash() in express.js

Ways to identify browser version in Angular 4 to discourage IE usage

Exploring the functionality of NSPredicate with block implementations

Retrieve data from a MongoDB collection based on a specific index field

Damaged .xlsx document originating from a Flask web application and an ajax POST submission

Transforming an array into key-value pairs where the keys are odd elements and the values are even elements

Ensuring the safety of props in JSX, similar to Jinja2 techniques

Trouble with executing jquery window.open during ajax success due to blocking

jquery click event triggers changes on several elements sharing a common class

Transforming JSON data into a dynamic Tableview

Acquire YouTube embeds from a Facebook community

Executing usemin and useminPrepare on various targets is made possible by Grunt

Updating MongoDB collections in Mongoose with varying numbers of fields: A step-by-step guide

Any suggestions on how to incorporate the variable into the inline JavaScript [[]] API path?

Ways to safeguard NextJS Route Handlers from unauthorized access beyond my website

What is the best way to hide a div when an image is positioned on top of it?

Can the values of an enum in TypeScript be altered dynamically?