lodashでネストされたフィルタを作成する方法

Question

次のネストされたJSONデータ構造を持っています。各ノードは任意の数の子ノードを持つことができ、データは任意の数のノードに深くすることができます。

[{ 
    id : "a", 
    path : "a" 
}, { 
    id : "b", 
    path : "b" 
}, { 
    id : "c", 
    path : "c", 
    children: [{ 
     id : "a", 
     path : "c/a" 
    }, { 
     id : "b", 
     path : "c/b", 
     children: [{ 
      id : "a", 
      path : "c/b/a" 
     }, { 
      id : "b", 
      path : "c/b/b" 
     }] 
    }] 
}] 

Iは一致パスのネストされたJSONオブジェクト、及び任意の親オブジェクトを返すlodash（v3.10.1）関数を作成する必要があります。私は「B」で検索した場合たとえば、フィルタは次のように返す必要があり ：

[{ 
    id : "b", 
    path : "b" 
}, { 
    id : "c", 
    path : "c", 
    children: [{ 
     id : "b", 
     path : "c/b", 
     children: [{ 
      id : "a", 
      path : "c/b/a" 
     }, { 
      id : "b", 
      path : "c/b/b" 
     }] 
    }] 
}] 

私の最初の試みは、このようなものだったが、それは仕事をした：

const filterTree = (filter, list) => { 
    return _.filter(list, (item) => { 
     if (item.path) { 
      return _.includes(item.path.toLowerCase(), filter.toLowerCase()); 
     } else if (item.children) { 
      return !_.isEmpty(filterTree(filter, item.children)); 
     } 
    }); 
}; 

すべてのヘルプははるかになります

Answer 1

最初の問題は、if (item.path)は常にtrueであるため、再帰呼び出しは起こりません。

_.filterは、渡された配列を変更しないため、望ましい結果を得るには、再帰的なケースでフィルタリングした後にitem.childrenを更新する必要があります。入力を変更したくない場合は、最初にコピーを作成するのに_.cloneDeepを使用してください。

const data = [{"id":"a","path":"a"},{"id":"b","path":"b"},{"id":"c","path":"c","children":[{"id":"a","path":"c/a"},{"id":"b","path":"c/b","children":[{"id":"a","path":"c/b/a"},{"id":"b","path":"c/b/b"}]}]}]; 
 

 
const filterTree = (filter, list) => { 
 
    return _.filter(list, (item) => { 
 
    if (_.includes(_.toLower(item.path), _.toLower(filter))) { 
 
     return true; 
 
    } else if (item.children) { 
 
     item.children = filterTree(filter, item.children); 
 
     return !_.isEmpty(item.children); 
 
    } 
 
    }); 
 
}; 
 

 
console.log(filterTree('b', data));

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

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