ReactJS 过滤复杂的 Json答案

【问题标题】：ReactJS filter complex JsonReactJS 过滤复杂的 Json
【发布时间】：2017-07-14 14:06:03
【问题描述】：

[在此处输入图片描述][1]请帮助我，因为我正在努力工作。我有一个 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 并仅返回具有所选属性为 true 的条目。

到目前为止，我尝试了很多事情都没有成功，你们能帮助我吗？

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

【问题讨论】：

这些都没有chosen: true
chosen true 是以编程方式设置的...我编辑了 JSON 以举例说明。
你能发布应该完成这个的代码吗？当您说“遍历 JSON”时，我觉得您没有将其解析为 JavaScript 对象。
您是否尝试将数据记录到控制台以确认您的过滤器是否正常工作？我仍然看不到您将 JSON 解析为 JavaScript 的位置。您应该发布实际尝试使用过滤器的代码。您能否通过编辑您的问题本身以代码格式添加它以提高可读性？
如果节点有chosen: true 是否应该过滤返回包含所有子节点的整个节点？

标签： json reactjs filter treeview

【解决方案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，但您可以根据需要进行更改。

【讨论】：

如果树有 10k 或更多节点，这将如何执行？
这取决于递归级别。更小的递归 - 更快的功能。