在过滤 object 内的深层嵌套数组时，保留父 object

Question

我已经在 SO 中寻找解决方案，但很难应用任何给出的解决方案。 我正在使用 JavaScript/React，所以我需要 JS 中的解决方案。

从具有以下结构的数据库返回 object，

source.source.source（三个级别，所有的孩子都称为源）。

第一个源是 object，第二个源也是 object，第三个源是包含所有元素的数组。

数组中的每个元素都有一个属性“isActive”，如

source.source.source.isActive

我认为下面的代码会保留整个 object，但它会丢失两个父节点和所有数据（源和源），并且只返回嵌套在 source.source 中的数组。 我需要过滤从 axios 中返回的整个 object。

const responseDataFiltered = source.source.source.filter(obj => Boolean(obj.isActive) === true)

我需要一种方法来保留所有父元素，同时只显示具有 isActive === true 的数组元素。

我想要实现的是过滤来自数据库的响应，其中返回的元素将属性 isActive 设置为 true，并且我需要主要结构/父元素。 所以本质上，我需要一个包含嵌套数据的主父元素源的副本，但过滤掉所有 isActive === false。

我正在使用 api 中的 Axios 获取数据。 响应是整个 object 具有深度嵌套的数组，其中包含我需要在 isActive 上过滤的数千个元素。 一旦返回的 object 过滤掉了所有 isActive === false 我想将它传递给 useState 挂钩并显示数据。

Answer 1

您可以将嵌套数组替换为过滤器数据：

 const source = { one: 1, two: 2, source:{ three: 3, four: 4, source: [ {isActive: true}, {isActive: true}, {isActive: false}, {isActive: false}, ], }, }; const actives = source.source.source.filter(({ isActive }) => isActive); const responseDataFiltered = {...source, source: {...source.source, source: actives, }, }; console.log(responseDataFiltered);

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