与父对象一起获取深层对象

Question

下面是示例数据（分层数据）我只想要具有 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，并使用递归将过滤器应用于子层次结构：

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);

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

注意：在 JavaScript 中有一条不成文的规定，属性名称不使用首字母大写，因此 IsChecked 将使用小写字母 i ：isChecked。首字母大写字母通常用于构造函数 (类)。

替代`.filter()`

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));

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

Answer 2

使用 Lodash _.filter and _.every

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

如果您还想检查 children 的 children 的条件，您可以像

一样递归执行

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

与父对象一起获取深层对象

Get deep object along with parent

javascript

underscore.js

lodash

替代`.filter()`

与父对象一起获取深层对象

Get deep object along with parent

javascript

underscore.js

lodash

替代.filter()

替代`.filter()`