在javascript中将`JSON字符串`映射到`tree`

Question

我有JSON 形式为{"Others": null, "Main Hobbies": {"Dance": ["Salsa", "Solo"], "Sports": ["Cricket"]}, "Game": ["PUBG", "Cricket", "Football"]}'

我想把它转换成tree structure 像

 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}]},

到目前为止，这是我使用以下函数的方式，但不是将其转换为 tree 结构，而是将其转换为列表结构，即最多仅 two levels。但是所需的输出是 Three level

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

 ];

想转换tree nodeslike here

Answer 1

您可以通过检查移交数据的类型来对对象采取递归方法。

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