使用 Javascript 将 Flat JSON 转换为 JSON 树

Question

这是我得到的 JSON 输出的格式

oldJSON = [
{ "Node": "Node1", "NodeParent": "" },
{ "Node": "Node1A", "NodeParent": "Node1" },
{ "Node": "Node1B", "NodeParent": "Node1" },
{ "Node": "Node2", "NodeParent": "" },
{ "Node": "Node2A", "NodeParent": "Node2" },
{ "Node": "Node2B", "NodeParent": "Node2" },
{ "Node": "Node3", "NodeParent": "" },
{ "Node": "Node3A", "NodeParent": "Node3" },
{ "Node": "Node3A1", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A2", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A3", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A1x", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1y", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1z", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3B", "NodeParent": "Node3" },
{ "Node": "Node3B1", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B2", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B3", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B1x", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1y", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1z", "NodeParent": "Node3;Node3B:Node3B1" }]

我想将上面的 JSON 转换为如下所示的树状结构。

NewJsonArray = [
{
    "Node": "Node1",
    "children": [
        {
            "Node": "Node1A"
        },
        {
            "Node": "Node1B"
        }
    ]
},
{
    "Node": "Node2",
    "children": [
        {
            "Node": "Node2A"
        },
        {
            "Node": "Node2B"
        }
    ]
},
{
    "Node": "Node3",
    "children": [
        {
            "Node": "Node3A"
        },
        {
            "Node": "Node3B"
        }
    ],
    "Node3A": {
        "Node": "Node3A",
        "children": [
            {
                "Node": "Node3A1"
            },
            {
                "Node": "Node3A2"
            },
            {
                "Node": "Node3A3"
            }
        ],
        "Node3A1": {
            "Node": "Node3A1",
            "children": [
                {
                    "Node": "Node3A1x"
                },
                {
                    "Node": "Node3A1y"
                },
                {
                    "Node": "Node3A1z"
                }
            ]
        }
    },
    "Node3B": {
        "Node": "Node3B",
        "children": [
            {
                "Node": "Node3B1"
            },
            {
                "Node": "Node3B2"
            },
            {
                "Node": "Node3B3"
            }
        ],
        "Node3B1": {
            "Node": "Node3B1",
            "children": [
                {
                    "Node": "Node3B1x"
                },
                {
                    "Node": "Node3B1y"
                },
                {
                    "Node": "Node3B1z"
                }
            ]
        }
    }
}

]

你可以看到NodeParent是用分号隔开的，要求是把NodeParent分割开，这样就可以生成类似JSON的树并推送到对应的父节点下。

Answer 1

对于这样的事情，最简单的方法是首先创建一个嵌套对象，其中根节点名称作为顶层的键，可以使用Array#reduce() 完成。

然后将 NodeName 值拆分为数组并使用另一个 reduce() 遍历父节点以获取特定父节点以推送到

最后使用 Object.values() 从主对象中获取外层数组

const map = data.reduce((a,{Node,NodeParent})=>{
   if(!NodeParent){
      a[Node] ={ Node, children:[] };
   }else{     
      const parent = NodeParent.split(/;|:/g).reduce((a,c)=>{
           a[c] = a[c] || { Node:c, children:[] };
           return a[c]
      },a);
     
      parent.children.push({Node})
   }
   return a;
},{});

const res = Object.values(map);

console.log(JSON.stringify(res,null,4));

.as-console-wrapper {  max-height: 100%!important;}

<script>
const data = [
{ "Node": "Node1", "NodeParent": "" },
{ "Node": "Node1A", "NodeParent": "Node1" },
{ "Node": "Node1B", "NodeParent": "Node1" },
{ "Node": "Node2", "NodeParent": "" },
{ "Node": "Node2A", "NodeParent": "Node2" },
{ "Node": "Node2B", "NodeParent": "Node2" },
{ "Node": "Node3", "NodeParent": "" },
{ "Node": "Node3A", "NodeParent": "Node3" },
{ "Node": "Node3A1", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A2", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A3", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A1x", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1y", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1z", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3B", "NodeParent": "Node3" },
{ "Node": "Node3B1", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B2", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B3", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B1x", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1y", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1z", "NodeParent": "Node3;Node3B:Node3B1" }]
</script>