在過濾 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 }