在JavaScript中将`JSON string`映射到`tree` [英] Map `JSON string` to `tree` in javascript

问题描述

我正在使用形式的 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 结构，它将转换为列表结构，即仅两个级别。但是所需的输出为三个级别

< pre class = snippet-code-js lang-js prettyprint-override> 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 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);

 ];

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`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！