2017-07-14 103 views
0

[请输入图片描述] [1]请帮助我,因为我努力工作。我有一个JSON,代表我的应用程序中的树视图。ReactJS过滤器复杂Json

{ 
    name: 'Global', toggled: true, children: [ 
     { 
      name: 'Region A', nodeid: 0,chosen: true,pushed: false, 
      children: [ 
       { name: 'Town A', nodeid: 1, chosen: true, pushed: false, 
        children: [{ 
        name : "child 1", pushed: false, chosen:false 
        }] 
       }, 
       { name: 'Town B', nodeid: 2, chosen: false, pushed: false, 
        children: [{ 
        name : "child 2", pushed: false, chosen: false 
        }] 
       } 
      ] 
     } 
    ] 
}; 

我想要做的是遍历我的JSON并只返回具有所选属性为真的条目。

到目前为止,我尝试了很多没有成功的事情,你们能帮助我吗?

https://i.stack.imgur.com/r61MO.jpg

onPush(e){ 
     var chosennodes = filters.filterTreeChosen(this.state.data); 
     this.setState({selectednodes: chosennodes}); 
    } 

然后过滤器本身:

[Object.filter = (obj, predicate) => 
     Object.keys(obj) 
      .filter(key => predicate(obj\[key\])) 
      .reduce((res, key) => (res\[key\] = obj\[key\], res), {}); 

export const isChosen = (chosen) =>{ 
    return chosen == true; 
} 

export const filterTreeChosen = (nodes) => { 
    var filtered = Object.filter(nodes, node => node.chosen == true); 
    console.log(filtered); 
};][1] 

https://i.stack.imgur.com/IAXZ7.jpg

+0

没有'选择:true' –

+0

选择true以编程方式设置...我编辑了JSON的例子。 –

+0

你能发布应该完成这个的代码吗?当你说“遍历JSON”时,这让我觉得你并没有把它解析成一个JavaScript对象。 – Smaft

回答

1

检查了这一点。我认为它应该适用于你的任务。

const tree = { 
 
    name: 'Global', toggled: true, children: [ 
 
     { 
 
      name: 'Region A', nodeid: 0,chosen: true,pushed: false, 
 
      children: [ 
 
       { name: 'Town A', nodeid: 1, chosen: true, pushed: false, 
 
        children: [{ 
 
        name : "child 1", pushed: false, chosen:false 
 
        }] 
 
       }, 
 
       { name: 'Town B', nodeid: 2, chosen: false, pushed: false, 
 
        children: [{ 
 
        name : "child 2", pushed: false, chosen: false 
 
        }] 
 
       } 
 
      ] 
 
     } 
 
    ] 
 
}; 
 

 
function getChosenNodes (nodes) { 
 
    let result = []; 
 
    
 
    nodes.forEach(node => { 
 
    if (node.chosen) { 
 
     result = result.concat([node.nodeid]); 
 
    } 
 

 

 
    if (node.children) { 
 
     result = result.concat(getChosenNodes(node.children)); 
 
    } 
 
    }) 
 
    
 
    return result; 
 
} 
 

 
console.log(getChosenNodes([tree]))

我只nodeid返回,但因为你需要,你可以改变它。

+0

如果树有10k或更多的节点,这将如何执行? –

+0

它取决于递归级别。更小的递归 - 更快的功能。 –

+0

我不得不强制我的数据到一个数组,但它的工作! –