使用Javascript将Flat JSON转换为JSON树

时间:2018-11-22 17:30:24

标签: javascript arrays json ecmascript-6

这是我得到的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由分号分隔,要求是拆分No​​deParent,以便可以生成JSON之类的树并将其推送到相应的父节点下。

1 个答案:

答案 0 :(得分:0)

对于这样的事情,最简单的方法是首先创建一个嵌套对象,其根节点名称作为顶层的键,可以使用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>

相关问题