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

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:已检查。首字母大写通常用于构造函数(类)。

替代.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; }