在JavaScript中将`JSON string`映射到`tree`

本文介绍了在JavaScript中将`JSON string`映射到`tree`的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在使用形式的 JSON { Others：null， Main Hobbies：{ Dance：[ Salsa ， Solo]， Sports：[ Cricket]}}， Game：[ PUBG， Cricket， Football]} ' 我想将其转换为树结构 数据= [ //不包含其他，因为它为空 {名称：主要爱好，选中了：否，子级：[ {名称：'Dance'，选中：false，孩子：[{名称：'Salsa'，选中：false}，{名称：'Solo'，选中：false}]}， {名称： 'Sports'，选中：false，孩子[{name：'Cricket'，checked：false}]} ] }， {名称：'Game'，选中：false，children ：[{{name： PUBG，checked：false}，{name： Cricket，checked：false}，{name： Football，checked：false}]}， 到目前为止，这是我现在使用以下功能的方式，而不是将其转换为 tree 结构，它将转换为列表结构，即仅两个级别。但是所需的输出为三个级别 let data = {其他：null，主要爱好：{舞蹈：[莎莎，独奏 ]， Sports：[ Cricket]}， Game：[ PUBG， Cricket， Football]}; var result = filterData（data）; function filterData（data）{让result = [];对于（数据中的var键）{var值= data [key]; let val = data [key]; if（val）{if（Array.isArray（val）& val.length> 0）{let ob = {}; ob [’name’] =键； ob [’checked’] = false; ob [’children’] = getChildren（val）; result.push（ob）; }其他if（typeof val =='object'）{let ob = {}; ob [’name’] =键； ob [’checked’] = false; ob [’chldren’] = filterData（val）; result.push（filterData（val））;返回结果； }函数getChildren（data）{let result = []; data.forEach（function（e）{let ob = {}; ob ['name'] = e; ob ['checked'] = false; if（Array.isArray（e.children）&& e.children .length）{ob ['children'] = getChildren（e.children）;} result.push（ob）;}）返回结果； } console.log（result）; ]; 想要转换树节点 像这里 解决方案您可以通过检查移交数据的类型对对象采取递归方法。 function create（data，check = false）{return Array.isArray（data）？ data.map（name =>（{名称，已选中}））：Object .entries（data）.filter（（[，v]）=> v！== null&&（！Array.isArray（ v）|| v.length））.map（（[[name，value]）=>（{{名称，已选中，子代：create（value，已选中）}））}} var data = {空：[]，其他：null，主要爱好：{舞蹈：[ Salsa， Solo]，体育：[ Cricket]}，游戏：[ PUBG， Cricket， Football]}，结果=创建（数据）; console.log（结果）; 。 as-console-wrapper {max-height：100％！important;最高：0; } I am having JSON in the form of {"Others": null, "Main Hobbies": {"Dance": ["Salsa", "Solo"], "Sports": ["Cricket"]}, "Game": ["PUBG", "Cricket", "Football"]} 'And i want to convert it into tree structure like data = [// not include Others since it is null{ name: 'Main Hobbies', checked: false, children: [ { name: 'Dance', checked: false, children: [ { name: 'Salsa', checked: false },{ name: 'Solo', checked: false }] }, { name: 'Sports' , checked : false , children [{name :'Cricket',checked:false}]} ]},{ name: 'Game', checked: false ,children:[{name:"PUBG",checked:false},{name:"Cricket",checked:false},{name:"Football",checked:false}]},Here is how i am using these below functions so far , but rather than converting it to tree structure it is converting into list structure i.e upto only two levels.However the desired output is of Three levellet data = {"Others": null, "Main Hobbies": {"Dance": ["Salsa", "Solo"], "Sports": ["Cricket"]}, "Game": ["PUBG", "Cricket", "Football"]};var result = filterData(data);function filterData(data){ let result = []; for (var key in data){ var value = data[key]; let val = data[key]; if(val){ if(Array.isArray(val) && val.length>0){ let ob ={}; ob['name'] = key; ob['checked']=false; ob['children'] = getChildren(val); result.push(ob); }else if(typeof val == 'object'){ let ob ={}; ob['name'] = key; ob['checked']=false; ob['chldren']=filterData(val); result.push(filterData(val)); } } } return result; } function getChildren(data){ let result = []; data.forEach(function(e){ let ob = {}; ob['name'] = e; ob['checked']=false; if(Array.isArray(e.children) && e.children.length){ ob['children'] = getChildren(e.children); } result.push(ob); }) return result; } console.log(result); ];want to convert tree nodes like here 解决方案 You could take a recursive approach for objects by checking the type of the handed over data.function create(data, checked = false) { return Array.isArray(data) ? data.map(name => ({ name, checked })) : Object .entries(data) .filter(([, v]) => v !== null && (!Array.isArray(v) || v.length)) .map(([name, value]) => ({ name, checked, children: create(value, checked) }))}var data = { empty: [], Others: null, "Main Hobbies": { Dance: ["Salsa", "Solo"], Sports: ["Cricket"] }, Game: ["PUBG", "Cricket", "Football"] }, result = create(data);console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; } 这篇关于在JavaScript中将`JSON string`映射到`tree`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！