javascript - 一维和嵌套的json对象数组之间如何使用JS转化?
習慣沉默
習慣沉默 2017-05-19 10:13:06
0
3
694

这两种数据格式如何通过JS相互转化?
相同的内容,扁平化的组合成嵌套的,嵌套的拆解成扁平化的格式
弄了半天弄不出来,求助!

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

全部回复(3)
滿天的星座

利用递归实现

// 待处理数值 
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)); 

最外面的data是数组,其实他可以被认为是外层的 children 属性,而data的子元素自己也说不定有 children。

巴扎黑

现在逆向的方法也在群友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));

为情所困

雷雷

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板