Question

如何在 React 中过滤对象数组

2019-09-16

13817

javascript arrays reactjs filter

我有一个需要在 React 中过滤的时间序列对象数组。具体来说，我需要返回一个包含对象数组的过滤子集的数组，基于 device_id 的值等于例如 7F34B296 。

原始数组如下所示：

[
    {
        "label": "time_stamp",
        "data": [
            "2019-04-17 21:01:25.673949957+02:00",
            "2019-04-17 21:01:30.673949957+02:00",
            "2019-04-17 21:01:35.673949957+02:00",
            "2019-04-17 21:01:40.673949957+02:00",
            "2019-04-17 21:01:45.673949957+02:00"
        ]
    },
    {
        "label": "device_id",
        "data": [
            "7F34B296",
            "7F34B296",
            "7F34B296",
            "AB22438D",
            "AB22438D"
        ]
    },
    {
        "label": "parameter_x",
        "data": [
            "929.1965116",
            "927.5152582",
            "928.7476077",
            "1919.2691327",
            "1918.7047619"
        ]
    }
]

预期的输出数组（过滤后）如下所示：

[
    {
        "label": "time_stamp",
        "data": [
            "2019-04-17 21:01:25.673949957+02:00",
            "2019-04-17 21:01:30.673949957+02:00",
            "2019-04-17 21:01:35.673949957+02:00"
        ]
    },
    {
        "label": "device_id",
        "data": [
            "7F34B296",
            "7F34B296",
            "7F34B296"
        ]
    },
    {
        "label": "parameter_x",
        "data": [
            "929.1965116",
            "927.5152582",
            "928.7476077"
        ]
    }
]

我尝试使用各种方法，包括以下方法 - 但我似乎无法获得所需的结果。我想我遗漏了如何处理整个对象数组的过滤应该取决于其中一个对象的子集的值的部分。

const filters = [
    {
      predicateFn: data => data.data == "7F34B296"
    }
  ];

  function getFilteredPersons(filters) {
    return datasets.filter(p => filters.every(filter => filter.predicateFn(p)));
  }

  console.log(getFilteredPersons(filters));

Answer 1

也许尝试将您的数据映射到某种结构，例如：

const joinedData = []
data.map((element) =>
  element.data.map((e, i) => joinedData[i] = { [element.label]: e, ...joinedData[i]}))

然后您将转换数据形状：

 [
      {
        parameter_x: '929.1965116',
        device_id: '7F34B296',
        time_stamp: '2019-04-17 21:01:25.673949957+02:00'
      },
      {
        parameter_x: '927.5152582',
        device_id: '7F34B296',
        time_stamp: '2019-04-17 21:01:30.673949957+02:00'
      },
      {
        parameter_x: '928.7476077',
        device_id: '7F34B296',
        time_stamp: '2019-04-17 21:01:35.673949957+02:00'
      },
      {
        parameter_x: '1919.2691327',
        device_id: 'AB22438D',
        time_stamp: '2019-04-17 21:01:40.673949957+02:00'
      },
      {
        parameter_x: '1918.7047619',
        device_id: 'AB22438D',
        time_stamp: '2019-04-17 21:01:45.673949957+02:00'
      }
    ]

这将更容易过滤

Answer 2

如果您的数据对象始终以相同的方式构造（每个 3 个元素位于相同的位置），那么您可以执行以下操作：

const data = [
    {
        "label": "time_stamp",
        "data": [
            "2019-04-17 21:01:25.673949957+02:00",
            "2019-04-17 21:01:30.673949957+02:00",
            "2019-04-17 21:01:35.673949957+02:00",
            "2019-04-17 21:01:40.673949957+02:00",
            "2019-04-17 21:01:45.673949957+02:00"
        ]
    },
    {
        "label": "7F34B296",
        "data": [
            "7F34B296",
            "7F34B296",
            "7F34B296",
            "AB22438D",
            "AB22438D"
        ]
    },
    {
        "label": "parameter_x",
        "data": [
            "929.1965116",
            "927.5152582",
            "928.7476077",
            "1919.2691327",
            "1918.7047619"
        ]
    }
]

const mainData = data[1];
const deviceId = mainData.label;
const indexes = mainData.data.filter((item) => item === deviceId).map((e, idx, array) => idx);
const result = data.map((value) => {
    const filteredData = value.data.filter((item, idx) => {
        return indexes.some((e => idx === e));
    })

    return {
        ...value,
        data: filteredData
    }
});

console.log(result)

基本上只需在数组的第二个元素中找到 device_id 的索引，然后在 device_id 、 time_stamp 和 parameter_x data 属性的这些索引上提取值。

虽然这可能有效，但我建议重构您的数据，因为这是一个相当复杂的结构。

Answer 3

We can use forEach method with splice to get desired output.

let arr = [
    {
        "label": "time_stamp",
        "data": [
            "2019-04-17 21:01:25.673949957+02:00",
            "2019-04-17 21:01:30.673949957+02:00",
            "2019-04-17 21:01:35.673949957+02:00",
            "2019-04-17 21:01:40.673949957+02:00",
            "2019-04-17 21:01:45.673949957+02:00"
        ]
    },
    {
        "label": "device_id",
        "data": [
            "7F34B296",
            "7F34B296",
            "7F34B296",
            "AB22438D",
            "AB22438D"
        ]
    },
    {
        "label": "parameter_x",
        "data": [
            "929.1965116",
            "927.5152582",
            "928.7476077",
            "1919.2691327",
            "1918.7047619"
        ]
    }
]
arr.forEach( (val, index) => val.data.splice(3) ) 
console.log(arr)