javascript - json数据结构相互转换怎么操作？

问题描述

问 题

/*isleaf为true时表示叶子节点即文件，false时表示文件夹*/
var data1=[{
            "tid": "1",
            "isleaf": false,
            "text": "产品1",
            "children": [{
                "tid": "1-1",
                "isleaf": false,
                "text": "产品模拟",
                "children": [{
                    "tid": "1-1-1",
                    "isleaf": false,
                    "text": "产品模拟"
                }, {
                    "tid": "1-1-2",
                    "isleaf": true,
                    "text": "产品模拟"
                }]
            }, {
                "tid": "1-2",
                "isleaf": true,
                "text": "产品模拟"
            }]
        },{
            "tid": "2",
            "isleaf": false,
            "text": "产品2",
            "children": [{
                "tid": "2-1",
                "isleaf": false,
                "text": "产品模拟",
                "children": [{
                    "tid": "2-1-1",
                    "isleaf": true,
                    "text": "产品模拟"
                }, {
                    "tid": "2-1-2",
                    "isleaf": true,
                    "text": "产品模拟"
                }]
            }, {
                "tid": "2-2",
                "isleaf": true,
                "text": "产品模拟"
            }]
        }]

var data2= [
            {"tid": "1", "isleaf": false, "text": "产品1"},
            {"tid": "2", "isleaf": false, "text": "产品2"},

            {"tid": "1-1", "pid": "1", "isleaf": false, "text": "产品模拟"},
            {"tid": "1-2", "pid": "1", "isleaf": true, "text": "产品模拟"},
            {"tid": "2-1", "pid": "2", "isleaf": false, "text": "产品模拟"},
            {"tid": "2-2", "pid": "2", "isleaf": true, "text": "产品模拟"},

            {"tid": "1-1-1", "pid": "1-1", "isleaf": false, "text": "产品模拟"},
            {"tid": "1-1-2", "pid": "1-1", "isleaf": true, "text": "产品模拟"},
            {"tid": "2-1-1", "pid": "2-1", "isleaf": true, "text": "产品模拟"},
            {"tid": "2-1-2", "pid": "2-1", "isleaf": true, "text": "产品模拟"},
        ];

在做一个树形插件功能（类似文件管理系统用户可增删改查），用户对dom进行操作时要对应到相应数据做增删改查，比如新建文件是直接增加一层数据传递给后台，删除直接就删除相应dom对应的tid那一层的数据再渲染dom；
初次拿到数据时是第一种格式然后渲染出dom，但很多时候，要把第一种格式转换成第二种，怎么写两个方法实现两种格式数据互相转换。
还有这种强交互的树形文件管理数据层应该怎么设计？？有哪些要注意的？？（比如删除一层数据后所有数据要重新便利一边赋新的id吗？？）谢谢谢谢！！！

解决方案

function createTree(data, arr, tid) {
    arr = arr || [];
    data.reduce(function(prev, item) {
        tid ? prev.push({
            tid: item.tid,
            isleaf: item.isleaf,
            pid: tid,
            text: item.text
        }) : prev.push({
            tid: item.tid,
            isleaf: item.isleaf,
            text: item.text
        });
        item.children ? createTree(item.children, arr, item.tid) : '';
        return prev
    }, arr)
    return arr
}

console.log(JSON.stringify(createTree(data1, [])))
    
console.log(JSON.stringify(createTree(data1)))
[{"tid":"1","isleaf":false,"text":"产品1"},{"tid":"1-1","isleaf":false,"pid":"1","text":"产品模拟"},{"tid":"1-1-1","isleaf":false,"pid":"1-1","text":"产品模拟"},{"tid":"1-1-2","isleaf":true,"pid":"1-1","text":"产品模拟"},{"tid":"1-2","isleaf":true,"pid":"1","text":"产品模拟"},{"tid":"2","isleaf":false,"text":"产品2"},{"tid":"2-1","isleaf":false,"pid":"2","text":"产品模拟"},{"tid":"2-1-1","isleaf":true,"pid":"2-1","text":"产品模拟"},{"tid":"2-1-2","isleaf":true,"pid":"2-1","text":"产品模拟"},{"tid":"2-2","isleaf":true,"pid":"2","text":"产品模拟"}]

这篇关于javascript - json数据结构相互转换怎么操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！