javascript - How to use JS to convert between one-dimensional and nested arrays of json objects?
習慣沉默
習慣沉默 2017-05-19 10:13:06
0
3
691

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
    }
]
習慣沉默
習慣沉默

reply all(3)
滿天的星座

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.

巴扎黑

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

为情所困
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);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template