美文网首页
从后端获得数据格式化成树

从后端获得数据格式化成树

作者: 你的理想实现了吗 | 来源:发表于2017-03-09 09:33 被阅读0次

    只用DVA框架,用到antd 中级联选取,遇到后台数据并不是树状结构(后端数据最好是按照生成时间排序下),js处理成树状结构适用于 Cascader组件 结果如下:

    [

    {

    "value": "58c0a3e1c8183a3d9fefd318",

    "label": "板凳",

    "_id": "58c0a3e1c8183a3d9fefd318",

    "children": [

    {

    "value": "58c0a400c8183a3d9fefd31a",

    "label": "方凳",

    "_id": "58c0a400c8183a3d9fefd31a"

    }

    ]

    },

    {

    "value": "58c0a3dbc8183a3d9fefd317",

    "label": "桌子",

    "_id": "58c0a3dbc8183a3d9fefd317",

    "children": [

    {

    "value": "58c0a3eec8183a3d9fefd319",

    "label": "圆桌",

    "_id": "58c0a3eec8183a3d9fefd319"

    }

    ]

    },

    {

    "value": "58c0a3d2c8183a3d9fefd316",

    "label": "床",

    "_id": "58c0a3d2c8183a3d9fefd316",

    "children": [

    {

    "value": "58c0a410c8183a3d9fefd31b",

    "label": "水床",

    "_id": "58c0a410c8183a3d9fefd31b"

    }

    ]

    }

    ]

    var data = JSON.parse('[{"_id":"58c0a410c8183a3d9fefd31b","qtext":"","valid":true,"updateAt":"2017-03-09T00:38:40.800Z","createAt":"2017-03-09T00:38:40.800Z","name":"水床","parentId":"58c0a3d2c8183a3d9fefd316","attributes":[],"note":"","cnum":"CATEGORY1703090007"},{"_id":"58c0a400c8183a3d9fefd31a","qtext":"","valid":true,"updateAt":"2017-03-09T00:38:24.594Z","createAt":"2017-03-09T00:38:24.594Z","name":"方凳","parentId":"58c0a3e1c8183a3d9fefd318","attributes":[],"note":"","cnum":"CATEGORY1703090006"},{"_id":"58c0a3eec8183a3d9fefd319","qtext":"","valid":true,"updateAt":"2017-03-09T00:38:06.272Z","createAt":"2017-03-09T00:38:06.272Z","name":"圆桌","parentId":"58c0a3dbc8183a3d9fefd317","attributes":[],"note":"","cnum":"CATEGORY1703090005"},{"_id":"58c0a3e1c8183a3d9fefd318","qtext":"","valid":true,"updateAt":"2017-03-09T00:37:53.247Z","createAt":"2017-03-09T00:37:53.247Z","name":"板凳","parentId":"","attributes":[],"note":"","cnum":"CATEGORY1703090004"},{"_id":"58c0a3dbc8183a3d9fefd317","qtext":"","valid":true,"updateAt":"2017-03-09T00:37:47.447Z","createAt":"2017-03-09T00:37:47.447Z","name":"桌子","parentId":"","attributes":[],"note":"","cnum":"CATEGORY1703090003"},{"_id":"58c0a3d2c8183a3d9fefd316","qtext":"","valid":true,"updateAt":"2017-03-09T00:37:38.494Z","createAt":"2017-03-09T00:37:38.494Z","name":"床","parentId":"","attributes":[],"note":"","cnum":"CATEGORY1703090002"}]');

    var rst = [];

    data.forEach(v => {

    !v.parentId && rst.push({"value":v._id,"label":v.name,"_id":v._id});

    })

    data.forEach(v => {

    v.parentId && getParent(v,rst);

    })

    function getParent(item, elems) {

    if (!elems) {

    return;

    }

    elems.forEach(v => {

    if (v._id === item.parentId) {

    v.children ? v.children.push({"value":item._id,"label":item.name,"_id":item._id}) : (v.children = [{"value":item._id,"label":item.name,"_id":item._id}]);

    } else {

    return getParent(item, v.children);

    }

    })

    }

    console.log(JSON.stringify(rst));

    相关文章

      网友评论

          本文标题:从后端获得数据格式化成树

          本文链接:https://www.haomeiwen.com/subject/yfcwgttx.html