Is it possible for us to perform an addition operation on two or more items that belong to the same

Question

Is it possible for us to perform an addition operation on two or more items that belong to the same

I am faced with a challenge involving 3 objects of the same type, each having different values for their properties. My goal is to add them together as illustrated below:

Consider this scenario:

objA = { 
    data: {
        SH: { propertyA: 0, propertyB: 3, propertyC: 0},
        ....
    }
}
objB = { 
    data: {
        SH: { propertyA: 0, propertyB: 0, propertyC: 1},
        ....
    }
}
objC = { 
    data: {
        SH: { propertyA: 4, propertyB: 0, propertyC: 0},
        ....
    }
}

The desired outcome should look like this:

objC = { 
    data: {
        SH: { propertyA: 4, propertyB: 3, propertyC: 1},
        ...
    } 
}

Is it feasible to perform such additions?

If not, could you propose an alternative coding method that does not involve maintaining three separate object types for each?

EDIT: When mentioning addition, I am referring to adding numerical values of properties from the three objects. While some properties may be strings, my focus lies only on numerical values.

javascript typescript object-type

Answer 1

Answer №1

Ultimately, it involves a significant amount of looping. There are various ways to approach the looping process. One simple method is to examine the objects themselves and include new elements when they are missing.

objD = { 
    data: {
        SH: { propertyA: 0, propertyB: 3, propertyC: 0, x: 'funky-chicken'},
        OP: { OO: 1, ZZ: 2 },
    }
}
objE = { 
    data: {
        SH: { propertyA: 0, propertyB: 0, propertyC: 1, x: 'funky-chicken'},
        OP: { OO: 1, YY: 100 },
    }
}
objF = { 
    data: {
        SH: { propertyA: 4, propertyB: 0, propertyC: 0},
        AA: { A: 1 },
    }
}

const finalResult = [objD, objE, objF].reduce(({ data }, obj) => {
  const objectEntries = Object.entries(obj.data);
  objectEntries.forEach(([key, items]) => {
    if (!data[key]){
      data[key] = { ...items };
    } else {
      Object.entries(items).forEach(([item, value]) => {
        if(typeof value === 'number') {
          data[key][item] = ( data[key][item] || 0 ) + value;
        }
      });
    }
  });
  return { data };
}, { data: {} })
console.log(finalResult);

Answer 2

Ultimately, it involves a significant amount of looping. There are various ways to approach the looping process. One simple method is to examine the objects themselves and include new elements when they are missing.

objD = { 
    data: {
        SH: { propertyA: 0, propertyB: 3, propertyC: 0, x: 'funky-chicken'},
        OP: { OO: 1, ZZ: 2 },
    }
}
objE = { 
    data: {
        SH: { propertyA: 0, propertyB: 0, propertyC: 1, x: 'funky-chicken'},
        OP: { OO: 1, YY: 100 },
    }
}
objF = { 
    data: {
        SH: { propertyA: 4, propertyB: 0, propertyC: 0},
        AA: { A: 1 },
    }
}

const finalResult = [objD, objE, objF].reduce(({ data }, obj) => {
  const objectEntries = Object.entries(obj.data);
  objectEntries.forEach(([key, items]) => {
    if (!data[key]){
      data[key] = { ...items };
    } else {
      Object.entries(items).forEach(([item, value]) => {
        if(typeof value === 'number') {
          data[key][item] = ( data[key][item] || 0 ) + value;
        }
      });
    }
  });
  return { data };
}, { data: {} })
console.log(finalResult);

Answer 3

Answer №2

Instead, here is a function that can calculate the sum of numbers at any level

If non-number values are encountered, they will take on the value of the last processed object (this behavior can be changed if needed)

Please note that array properties are not handled correctly

const objA = {
    data: {
        num: 1,
        SH: {
            propertyA: 0,
            propertyB: 3,
            propertyC: 0
        },
        text: 'objA',
        x: {
          y: {
            a: 1,
            b: 2,
            c: 3
          }
        }
    }
};
const objB = {
    data: {
        num: 2,
        SH: {
            propertyA: 0,
            propertyB: 0,
            propertyC: 1
        },
        text: 'objB',
        x: {
          y: {
            b: 4
          }
        }
    }
};
const objC = {
    data: {
        SH: {
            propertyA: 4,
            propertyB: 0,
            propertyC: 0
        },
        text: 'hello world',
        x: {
          y: {
            a: 1
          }
        }
    }
};

const addObjects = (...objs) => objs.reduce((result, obj) => {
        const fn = (obj, dest = result) => {
            Object.entries(obj).forEach(([key, value]) => {
                if (typeof value === 'object') {
                    dest[key] = dest[key] || {};
                    fn(value, dest[key]);
                } else {
                    if (typeof value === 'number') {
                        dest[key] = (dest[key] || 0) + value;
                    } else {
                        dest[key] = value;
                    }
                }
            });
            return result;
        };
        return fn(obj, result);
    }, {}
);
console.log(addObjects(objA, objB, objC));

Answer 4

Instead, here is a function that can calculate the sum of numbers at any level

If non-number values are encountered, they will take on the value of the last processed object (this behavior can be changed if needed)

Please note that array properties are not handled correctly

const objA = {
    data: {
        num: 1,
        SH: {
            propertyA: 0,
            propertyB: 3,
            propertyC: 0
        },
        text: 'objA',
        x: {
          y: {
            a: 1,
            b: 2,
            c: 3
          }
        }
    }
};
const objB = {
    data: {
        num: 2,
        SH: {
            propertyA: 0,
            propertyB: 0,
            propertyC: 1
        },
        text: 'objB',
        x: {
          y: {
            b: 4
          }
        }
    }
};
const objC = {
    data: {
        SH: {
            propertyA: 4,
            propertyB: 0,
            propertyC: 0
        },
        text: 'hello world',
        x: {
          y: {
            a: 1
          }
        }
    }
};

const addObjects = (...objs) => objs.reduce((result, obj) => {
        const fn = (obj, dest = result) => {
            Object.entries(obj).forEach(([key, value]) => {
                if (typeof value === 'object') {
                    dest[key] = dest[key] || {};
                    fn(value, dest[key]);
                } else {
                    if (typeof value === 'number') {
                        dest[key] = (dest[key] || 0) + value;
                    } else {
                        dest[key] = value;
                    }
                }
            });
            return result;
        };
        return fn(obj, result);
    }, {}
);
console.log(addObjects(objA, objB, objC));

Is it possible for us to perform an addition operation on two or more items that belong to the same

Answer №1

Answer №2

Similar questions

Mastering the Art of Utilizing $(this) in jQuery

Using v-model in Vue 3 will result in modifications to the table class in Bootstrap 5

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Modify the useRef value prior to the HTML rendering (React functional component)

Vuex is throwing a mysterious ReferenceError that is leaving developers

Experiencing browser crashes following the incorporation of asynchronous functions into a JavaScript file. Seeking solutions to resolve this

The Nuxt.js authentication module remains in place and does not redirect users who are already logged

Emphasize a specific line of text within a <div> with a highlighting effect

Restrict User File Uploads in PHP

AngularJS - Using filters to extract specific options from multiple <select> components

Bring your Electronic Catalogue to life with the addition of dynamic HTML content showcasing the latest

Can someone guide me on how to retrieve data from a MUI table within a React project

Vue: Optimizing JSON response filtering

Issue encountered when exporting with node and mongoose

Retrieve an array of 16 elements using React in a TypeScript environment

Creative Solution for Implementing a Type Parameter in a Generic

Execute an asynchronous request using Javascript to communicate with a Spring Controller

Tips for utilizing props in a Vue component

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?