与父母一起获取深层对象

Question

下面是示例数据（Hierarchical data）我只想要那个有IsChecked = true的对象数组，以及它的所有子条件isChecked =true。

$scope.treedData = [{
        "id": "1",
        "text": "Women",
        "parentId": null,
        "IsChecked": true,
        "children": [{
            "id": "4",
            "text": "Jeans",
            "parentId": "1",
            "IsChecked": true,
            "children": [
                { "id": "5", "text": "Jeans child", "parentId": "4", "IsChecked": true, "children": [] },
                { "id": "6", "text": "Jeans child child", "parentId": "4", "IsChecked": false, "children": [] }
            ]
        }]
    },
    {
        "id": "2",
        "text": "Men",
        "parentId": null,
        "IsChecked": false,
        "children": [{ "id": "10", "text": "Sweatshirts", "parentId": "2", "IsChecked": false, "children": [] }]
    },
    {
        "id": "3",
        "text": "Kids",
        "parentId": null,
        "IsChecked": true,
        "children": [{ "id": "12", "text": "Toys", "parentId": "3", "IsChecked": false, "children": [] }]
    }
];

Answer 1

您可以使用reduce，并使用递归将过滤器应用于子层次结构：

＆＃13;

＆＃13;

var treeData = [
  { "id": "1", "text": "Women", "parentId": null, "IsChecked": true,
   "children": [
     { "id": "4", "text": "Jeans",  "parentId": "1", "IsChecked": false, "children":[
       { "id": "5", "text": "Jeans child",  "parentId": "4", "IsChecked": true, "children":[]  },
       { "id": "6", "text": "Jeans child child",  "parentId": "4", "IsChecked": false, "children":[]  }
     ]  }]
  },
  { "id": "2", "text": "Men", "parentId": null,  "IsChecked": false,
   "children": [{ "id": "10", "text": "Sweatshirts", "parentId": "2", "IsChecked": false, "children":[]}]
  },
  {"id": "3", "text": "Kids", "parentId": null,  "IsChecked": true,
   "children": [{ "id": "12", "text": "Toys", "parentId": "3", "IsChecked": false, "children":[] }]
  }
];

checkedTreeData = treeData.reduce(function checkedOnly (acc, obj) {
  return obj.IsChecked 
    ? acc.concat(Object.assign({}, obj, { children: obj.children.reduce(checkedOnly, []) }))
    : acc;
}, []);

console.log(checkedTreeData);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：在JavaScript中，有一条不成文的规则是不对资产名称使用首字母大写字母，因此IsChecked将使用小写i：isChecked。初始大写字母通常用于构造函数（类）。

替代.filter()

＆＃13;

＆＃13;

function filterChecked(treeData) {
  return treeData.filter(obj => obj.IsChecked)
    .map(obj => Object.assign({}, obj, obj.children ? 
                { children: filterChecked(obj.children) } : {}))
}

var treeData = [
  { "id": "1", "text": "Women", "parentId": null, "IsChecked": true,
   "children": [
     { "id": "4", "text": "Jeans",  "parentId": "1", "IsChecked": false, "children":[
       { "id": "5", "text": "Jeans child",  "parentId": "4", "IsChecked": true, "children":[]  },
       { "id": "6", "text": "Jeans child child",  "parentId": "4", "IsChecked": false, "children":[]  }
     ]  }]
  },
  { "id": "2", "text": "Men", "parentId": null,  "IsChecked": false,
   "children": [{ "id": "10", "text": "Sweatshirts", "parentId": "2", "IsChecked": false, "children":[]}]
  },
  {"id": "3", "text": "Kids", "parentId": null,  "IsChecked": true,
   "children": [{ "id": "12", "text": "Toys", "parentId": "3", "IsChecked": false, "children":[] }]
  }
];


console.log(filterChecked(treeData));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Lodash _.filter和_.every

_.filter(treedData, function(item) {
    return _.every([
        item.IsChecked,
        _.every(item.children, 'IsChecked')
    ]);
});

如果您还想检查孩子的孩子的状况，您可以递归地执行

_.filter(treedData, function check(item) {
    return _.every([
        item.IsChecked,
        _.size(item.children) === 0 || _.every(item.children, check)
    ]);
});