在JavaScript中按键分组对象[重复]

Question

我有一个对象数组。这些对象有一个名为“type”的属性。

[{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "10",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "15",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
}]

现在，我有一个表格，我想在其中显示它。我想在两行中显示它，一行 row 用于“Plane”，一行 row 用于“Car”，并且在那一行中我想要（值，和另一个值）

所以我认为这是最简单的方法，方法是通过某种方式遍历我的原始对象数组并按“类型”对它们进行分组。所以我会得到一个包含所有类型为“Car”的对象和一个类型为“Plane”的对象的数组。

我有可用的 lodash，然后我还需要找到一种方法来sum这些值，这样我就可以在我的表格中，在每一行的列中显示它。

关于我如何做到这一点的任何建议？

Answer 1

您可以使用纯 JavaScript 执行此操作，使用 map() 和 filter() 等方法：

const arr = [{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "10",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "15",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
}]

const sum = (a, b) => Number(a) + Number(b)

const cars = arr.filter(x => x.type === 'Car')
const planes = arr.filter(x => x.type === 'Plane')

const carsValue = cars.map(x => x.value).reduce(sum)
const planesValue = planes.map(x => x.value).reduce(sum)

const carsAnotherValue = cars.map(x => x.another_value).reduce(sum)
const planesAnotherValue = planes.map(x => x.another_value).reduce(sum)

Answer 2

您可以先将所有对象按type 分组，然后减少所有value 和another_value：

var types = _.groupBy(array, 'type');
var result = _.mapValues(types, function(value, key) {
  return _.reduce(value, function(memo, v) { 
    return memo + +v.value + +v.another_value;
  }, 0);
});

var array = [{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "10",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "15",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
}];

var types = _.groupBy(array, 'type');
var result = _.mapValues(types, function(value, key) {
  return _.reduce(value, function(memo, v) { 
    return memo + +v.value + +v.another_value;
  }, 0);
});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

Answer 3

另一种方法

var count = _.countBy(data, 'type');
var sum = _.reduce(data, function(total, obj) {
    total[obj.type] += Number(obj.value);
    return total;
}, {
    Car: 0,
    Plane: 0
});

var data = [{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "10",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Plane",
    "date": "date",
    "value": "15",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
},
{
    "id": "1",
    "type": "Car",
    "date": "date",
    "value": "25",
    "another_value": "10"
}];

var count = _.countBy(data, 'type');
var sum = _.reduce(data, function(total, obj) {
  total[obj.type] += Number(obj.value);
  return total;
}, {
  Car: 0,
  Plane: 0
});

console.log(count['Plane']);
console.log(count['Car']);
console.log(sum['Plane']);
console.log(sum['Car']);

<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>