search

Home  >  Q&A  >  body text

javascript - How to use JS to convert between one-dimensional and nested arrays of json objects?

How to convert these two data formats into each other through JS?
The same content, the flat ones are combined into nested ones, and the nested ones are disassembled into flat formats
I couldn’t figure it out after a long time, please help!

[
    {
        "id":1,
        "number":"100.000",
        "name": "admin.",
        "level":1,
        "children": [
            {
                "id": 2,
                "number": "100.210",
                "name": "admin.marketing",
                "level": 2
            },
            {
                "id": 3,
                "number": "100.260",
                "name": "admin.operation",
                "level": 2,
                "children": [
                    {
                        "id": 5,
                        "number": "260.261",
                        "name": "operation.content",
                        "level": 3
                    },
                    {
                        "id": 6,
                        "number": "260.262",
                        "name": "operation.promote",
                        "level": 2
                    },
                    {
                        "id": 7,
                        "number": "260.263",
                        "name": "operation.service",
                        "level": 2
                    }
                ]
            },
            {
                "id": 4,
                "number": "100.280",
                "name": "admin.development",
                "level": 2
            }
        ]
    }
]
[
  {
      "id":1,
      "number":"100.000",
      "name": "admin.",
      "level":1
  },
  {
      "id": 2,
      "number": "100.210",
      "name": "admin.marketing",
      "level": 2
  },
  {
      "id": 3,
      "number": "100.260",
      "name": "admin.operation",
      "level": 2
  },
  {
      "id": 4,
      "number": "100.280",
      "name": "admin.development",
      "level": 2
  },
    {
        "id": 5,
        "number": "260.261",
        "name": "operation.content",
        "level": 3
    },
    {
        "id": 6,
        "number": "260.262",
        "name": "operation.promote",
        "level": 3
    },
    {
        "id": 7,
        "number": "260.263",
        "name": "operation.service",
        "level": 3
    }
]
習慣沉默習慣沉默2789 days ago713

reply all(3)I'll reply

  • 滿天的星座

    滿天的星座2017-05-19 10:15:06

    Using recursion to implement

    // 待处理数值 
    var data = [
        {
            "id":1,
            "number":"100.000",
            "name": "admin.",
            "level":1,
            "children": [
                {
                    "id": 2,
                    "number": "100.210",
                    "name": "admin.marketing",
                    "level": 2
                },
                {
                    "id": 3,
                    "number": "100.260",
                    "name": "admin.operation",
                    "level": 2,
                    "children": [
                        {
                            "id": 5,
                            "number": "260.261",
                            "name": "operation.content",
                            "level": 3
                        },
                        {
                            "id": 6,
                            "number": "260.262",
                            "name": "operation.promote",
                            "level": 2
                        },
                        {
                            "id": 7,
                            "number": "260.263",
                            "name": "operation.service",
                            "level": 2
                        }
                    ]
                },
                {
                    "id": 4,
                    "number": "100.280",
                    "name": "admin.development",
                    "level": 2
                }
            ]
        }
    ]
    
    // 递归函数
    function headFor(o, cb){
        if (!o) return; 
    
        o.forEach(child => {
            cb(child); 
            if (child.children) {
                headFor(child.children, cb);    
            }
        });
    }
    
    // 遍历 data 的结果保存在 res 
    var res = []; 
    
    // 调用 递归函数headFor  (注意 第二个参数是函数)
    headFor(data, item => {
        var temp = {}; 
        temp.id = item.id
        temp.number = item.number;
        temp.name = item.name; 
        temp.level = item.level; 
        res.push(temp); 
    }); 
    
    // 告诉数组怎么判断两个元素 然后让他数组自己去干 
    res.sort((a, b) => {
        return a.id > b.id; 
    }); 
    
    // 打印 
    res.forEach(e => console.log(e)); 
    console.log(JSON.stringify(res)); 

    The outermost data is an array. In fact, it can be considered as the outer children attribute, and the child elements of data may themselves have children.

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:15:06

    Now the reverse method has been completed with the help of group friend owl!

        var data=[
            {
                "id":1,
                "number":"100.000",
                "name": "admin.",
                "level":1
            },
            {
                "id": 2,
                "number": "100.210",
                "name": "admin.marketing",
                "level": 2
            },
            {
                "id": 3,
                "number": "100.260",
                "name": "admin.operation",
                "level": 2
            },
            {
                "id": 4,
                "number": "100.280",
                "name": "admin.development",
                "level": 2
            },
            {
                "id": 5,
                "number": "260.261",
                "name": "operation.content",
                "level": 3
            },
            {
                "id": 6,
                "number": "260.262",
                "name": "operation.promote",
                "level": 3
            },
            {
                "id": 7,
                "number": "260.263",
                "name": "operation.service",
                "level": 3
            }
        ];
    
        var res = [];
        var dicKey = {};
        data.forEach((m,i) => {
            var mStr = String(m.name).substr(0,String(m.name).indexOf(".")+1);
            var isParent = String(m.name).charAt(m.name.length -1) == ".";
            if(dicKey[mStr] == undefined)
            {
                dicKey[mStr] = [];
                if(!isParent)   dicKey[mStr].push(i);
            }else{
                dicKey[mStr].push(i);
            }
        });
        function getTreeJson(obj){
            var key = String(obj.name).charAt(obj.name.length -1) == "." ? obj.name:String(obj.name).substr(String(obj.name).indexOf(".")+1) + ".";
            if(dicKey[key])
            {
                dicKey[key].forEach(c =>{
                    if(!obj.children) obj.children = [];
                    obj.children.push(data[c]);
                    getTreeJson(data[c]);
                });
            }
        }
        data.forEach(m => {
            if(String(m.name).charAt(m.name.length -1) == ".")
            {
                res.push(m);
                getTreeJson(m);
            }
        });
    
        // 打印
        console.log(JSON.stringify(dicKey));
        console.log(JSON.stringify(res));

    reply
    0
  • 为情所困

    为情所困2017-05-19 10:15:06

    var data = [
        {
            "id":1,
            "number":"100.000",
            "name": "admin.",
            "level":1,
            "children": [
                {
                    "id": 2,
                    "number": "100.210",
                    "name": "admin.marketing",
                    "level": 2
                },
                {
                    "id": 3,
                    "number": "100.260",
                    "name": "admin.operation",
                    "level": 2,
                    "children": [
                        {
                            "id": 5,
                            "number": "260.261",
                            "name": "operation.content",
                            "level": 3
                        },
                        {
                            "id": 6,
                            "number": "260.262",
                            "name": "operation.promote",
                            "level": 2
                        },
                        {
                            "id": 7,
                            "number": "260.263",
                            "name": "operation.service",
                            "level": 2
                        }
                    ]
                },
                {
                    "id": 4,
                    "number": "100.280",
                    "name": "admin.development",
                    "level": 2
                }
            ]
        }
    ]
    var arr = [];
    function selirizeData(data){
        data.forEach(function(element) {
            var item = {};
            for(val in element){
                if(val !== 'children'){
                    item[val] = element[val];
                }else{
                    selirizeData(element['children']);
                }
            }
            arr.push(item);
        }, this);
    };
    selirizeData(data);

    reply
    0
  • Cancelreply