What is the best way to format and return a result object list in JavaScript or Angular?

Question

What is the best way to format and return a result object list in JavaScript or Angular?

I have a question regarding the use of for loops in JavaScript or utilizing Angular to output the resulting object list.

Here is an example of an object list:

var alist = [];
    alist = [
        { 'code': 1000, 'type': 'C', 'a': 4, 'b': null, 'c': null },
        { 'code': 1000, 'type': 'C', 'a': null, 'b': null, 'c': 6 },
        { 'code': 1500, 'type': 'O', 'a': null, 'b': null, 'c': 8 },
        { 'code': 1500, 'type': 'O', 'a': null, 'b': 8, 'c': null },
        { 'code': 1000, 'type': 'O', 'a': 7, 'b': null, 'c': null },
        { 'code': 1000, 'type': 'C', 'a': null, 'b': 7, 'c': null },
        { 'code': 2000, 'type': 'C', 'a': 4, 'b': null, 'c': null },
        { 'code': 2000, 'type': 'C', 'a': null, 'b': 6, 'c': 12 },
        { 'code': 3000, 'type': 'C', 'a': 1, 'b': null, 'c': 12 },
        { 'code': 3000, 'type': 'C', 'a': null, 'b': 6, 'c': null }
    ];

The desired result is to combine objects with the same code and type, while summing up the values of a, b, and c. Here is the expected result:

var resultList = [];
    resultList = [
        { 'code': 1000, 'type': 'C', 'a': 4, 'b': 7, 'c': 6 },
        { 'code': 1500, 'type': 'O', 'a': null, 'b': 8, 'c': 8 },
        { 'code': 1000, 'type': 'O', 'a': 7, 'b': null, 'c': null },
        { 'code': 2000, 'type': 'C', 'a': 4, 'b': 6, 'c': 12 },
        { 'code': 3000, 'type': 'C', 'a': 1, 'b': 6, 'c': 12 },
    ];

Key points to consider:

The 'code' value is dynamic and should not be hardcoded (e.g., 1000, 1500, 2000).
Each unique 'code' only contains one type, such as code 1000 only having type C.

Is it possible to achieve this desired output?

I have attempted to work on this in this jsfiddle, but I have yet to successfully produce the 'resultList'.

javascript angularjs

Answer 1

Answer №1

To enhance the organization of data, consider utilizing auxiliary arrays for key and parameters collection along with an object for grouping.

var data = [{ code: 1000, type: 'C', a: 4, b: null, c: null }, { code: 1000, type: 'C', a: null, b: null, c: 6 }, { code: 1500, 'type': 'O', a: null, b: null, c: 8 }, { code: 1500, type: 'O', a: null, b: 8, c: null }, { code: 1000, type: 'O', a: 7, b: null, c: null }, { code: 1000, type: 'C', a: null, b: 7, c: null }, { code: 2000, 'type': 'C', a: 4, b: null, c: null }, { code: 2000, type: 'C', a: null, b: 6, c: 12 }, { code: 3000, type: 'C', a: 1, b: null, c: 12 }, { 'code': 3000, type: 'C', a: null, b: 6, c: null }], keys = ['code', 'type'], values = ['a', 'b', 'c'], grouped = [];

data.forEach(function (a) {
    var key = keys.map(function (k) { return a[k]; }).join('|');
    if (!this[key]) {
        this[key] = {};
        keys.forEach(function (k) { this[k] = a[k]; }, this[key]);
        values.forEach(function (k) { this[k] = null; }, this[key]);
        grouped.push(this[key]);
    }
    values.forEach(function (k) {
        if (a[k] !== null) {
            this[k] = (this[k] || 0) + a[k];
        }
    }, this[key]);
}, Object.create(null));

console.log(grouped);

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

Answer 2

To enhance the organization of data, consider utilizing auxiliary arrays for key and parameters collection along with an object for grouping.

var data = [{ code: 1000, type: 'C', a: 4, b: null, c: null }, { code: 1000, type: 'C', a: null, b: null, c: 6 }, { code: 1500, 'type': 'O', a: null, b: null, c: 8 }, { code: 1500, type: 'O', a: null, b: 8, c: null }, { code: 1000, type: 'O', a: 7, b: null, c: null }, { code: 1000, type: 'C', a: null, b: 7, c: null }, { code: 2000, 'type': 'C', a: 4, b: null, c: null }, { code: 2000, type: 'C', a: null, b: 6, c: 12 }, { code: 3000, type: 'C', a: 1, b: null, c: 12 }, { 'code': 3000, type: 'C', a: null, b: 6, c: null }], keys = ['code', 'type'], values = ['a', 'b', 'c'], grouped = [];

data.forEach(function (a) {
    var key = keys.map(function (k) { return a[k]; }).join('|');
    if (!this[key]) {
        this[key] = {};
        keys.forEach(function (k) { this[k] = a[k]; }, this[key]);
        values.forEach(function (k) { this[k] = null; }, this[key]);
        grouped.push(this[key]);
    }
    values.forEach(function (k) {
        if (a[k] !== null) {
            this[k] = (this[k] || 0) + a[k];
        }
    }, this[key]);
}, Object.create(null));

console.log(grouped);

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

Answer 3

Answer №2

When looking to manipulate your data using pure javascript, the reduce() method can be quite useful.

var dataList = [
  { 'id': 1, 'name': 'John', 'age': 30, 'city': null },
  { 'id': 2, 'name': 'Jane', 'age': null, 'city': 'New York' },
  { 'id': 3, 'name': 'Doe', 'age': 25, 'city': 'Los Angeles' }
];

var updatedData = {}
var newDataList = dataList.reduce(function(result, item) {
  var key = item.id;
  if (!updatedData[key]) {
    updatedData[key] = item;
    result.push(updatedData[key]);
  } else {
    Object.keys(updatedData[key]).forEach(function(prop) {
      if (updatedData[key][prop] == null) updatedData[key][prop] = item[prop];
    })
  }
  return result;
}, [])

console.log(newDataList)

Answer 4

When looking to manipulate your data using pure javascript, the reduce() method can be quite useful.

var dataList = [
  { 'id': 1, 'name': 'John', 'age': 30, 'city': null },
  { 'id': 2, 'name': 'Jane', 'age': null, 'city': 'New York' },
  { 'id': 3, 'name': 'Doe', 'age': 25, 'city': 'Los Angeles' }
];

var updatedData = {}
var newDataList = dataList.reduce(function(result, item) {
  var key = item.id;
  if (!updatedData[key]) {
    updatedData[key] = item;
    result.push(updatedData[key]);
  } else {
    Object.keys(updatedData[key]).forEach(function(prop) {
      if (updatedData[key][prop] == null) updatedData[key][prop] = item[prop];
    })
  }
  return result;
}, [])

console.log(newDataList)

Answer 5

Answer №3

By utilizing the power of lodash, this problem can be elegantly solved:

(function (alist) {
    function mergeObjects(a, b) {
        return _.mergeWith(a, b, function (a, b, key) {
            if (['a', 'b', 'c'].indexOf(key) !== -1) {
                return _.isNull(a) && _.isNull(b) ? null : (a || 0) + (b || 0);
            }
        });
    }

    var result = _.reduce(_.groupBy(alist, 'code'), function (memo, groupedByCode) {
        return _.concat(memo, _.map(_.groupBy(groupedByCode, 'type'), function (groupedByType) {
            return _.reduce(_.tail(groupedByType), mergeObjects, _.head(groupedByType));
        }));
    }, []);

    console.log(result);
})([
    {'code': 1000, 'type': 'C', 'a': 4, 'b': null, 'c': null},
    {'code': 1000, 'type': 'C', 'a': null, 'b': null, 'c': 6},
    {'code': 1500, 'type': 'O', 'a': null, 'b': null, 'c': 8},
    {'code': 1500, 'type': 'O', 'a': null, 'b': 8, 'c': null},
    {'code': 1000, 'type': 'O', 'a': 7, 'b': null, 'c': null},
    {'code': 1000, 'type': 'C', 'a': null, 'b': 7, 'c': null},
    {'code': 2000, 'type': 'C', 'a': 4, 'b': null, 'c': null},
    {'code': 2000, 'type': 'C', 'a': null, 'b': 6, 'c': 12},
    {'code': 3000, 'type': 'C', 'a': 1, 'b': null, 'c': 12},
    {'code': 3000, 'type': 'C', 'a': null, 'b': 6, 'c': null}
]);

Firstly, group by code.
Next, for each code, group by type.
Lastly, for each type, merge the objects while adjusting the values accordingly.

Although this approach may not be the fastest, its declarative nature provides a clear insight into the process. Lodash proves to be an excellent tool for such tasks, and I highly recommend it. Feel free to check out the demo on JSFiddle. Hope this explanation helps!

Answer 6

By utilizing the power of lodash, this problem can be elegantly solved:

(function (alist) {
    function mergeObjects(a, b) {
        return _.mergeWith(a, b, function (a, b, key) {
            if (['a', 'b', 'c'].indexOf(key) !== -1) {
                return _.isNull(a) && _.isNull(b) ? null : (a || 0) + (b || 0);
            }
        });
    }

    var result = _.reduce(_.groupBy(alist, 'code'), function (memo, groupedByCode) {
        return _.concat(memo, _.map(_.groupBy(groupedByCode, 'type'), function (groupedByType) {
            return _.reduce(_.tail(groupedByType), mergeObjects, _.head(groupedByType));
        }));
    }, []);

    console.log(result);
})([
    {'code': 1000, 'type': 'C', 'a': 4, 'b': null, 'c': null},
    {'code': 1000, 'type': 'C', 'a': null, 'b': null, 'c': 6},
    {'code': 1500, 'type': 'O', 'a': null, 'b': null, 'c': 8},
    {'code': 1500, 'type': 'O', 'a': null, 'b': 8, 'c': null},
    {'code': 1000, 'type': 'O', 'a': 7, 'b': null, 'c': null},
    {'code': 1000, 'type': 'C', 'a': null, 'b': 7, 'c': null},
    {'code': 2000, 'type': 'C', 'a': 4, 'b': null, 'c': null},
    {'code': 2000, 'type': 'C', 'a': null, 'b': 6, 'c': 12},
    {'code': 3000, 'type': 'C', 'a': 1, 'b': null, 'c': 12},
    {'code': 3000, 'type': 'C', 'a': null, 'b': 6, 'c': null}
]);

Firstly, group by code.
Next, for each code, group by type.
Lastly, for each type, merge the objects while adjusting the values accordingly.

Although this approach may not be the fastest, its declarative nature provides a clear insight into the process. Lodash proves to be an excellent tool for such tasks, and I highly recommend it. Feel free to check out the demo on JSFiddle. Hope this explanation helps!

What is the best way to format and return a result object list in JavaScript or Angular?

Answer №1

Answer №2

Answer №3

Similar questions

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

Color change is only visible after adjusting the position, size, or shape of the object

The form does not display the radio button value upon submission

Retrieve all entries and merge a field with aggregated information in Mongoose (MongoDB)

Error: The property 'combine' of 'winston_1.default.format' cannot be destructured since it is not defined

Design an interactive quarter-circle using CSS styling

The date time chart in high charts is not displaying the X-Axis width correctly

Issue: Unhandled ReferenceError - onChangeAssignedGroup function is not declared within scope at HTMLSelectElement.onchange

Use JQuery to gradually decrease the opacity of divs individually

Choose an option removed upon clicking

Exploring shader file content within three.js with the help of jQuery

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Send an unchangeable list to a component that needs an Array

Utilizing Node.js, delete the author from the database and then use a GET request to display all

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

Discover the nodes with the highest connections in a D3 Force Graph

Mapping memory for FirefoxOS is like equivalent strides

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

The form is failing to redirect to another page

Having trouble retrieving properties from a JavaScript JSON object?