将分层路径数组转换为JSON

Question

我有一个带有it的路径列表，需要将其转换为完整的JSON对象。

我正在尝试将这个转换为：

 [
        {
            "id": 1,
            "name": "Electronics",
            "path": "Electronics"
        },
        {
            "id": 2,
            "name": "Laptops & PC",
            "path": "Electronics > Laptops & PC"
        },
        {
            "id": 7,
            "name": "Phones & Accessories",
            "path": "Electronics > Phones & Accessories"
        },
        {
            "id": 8,
            "name": "Smartphones",
            "path": "Electronics > Phones & Accessories > Smartphones"
        },
        {
            "id": 9,
            "name": "Android",
            "path": "Electronics > Phones & Accessories > Smartphones > Android"
        },
        {
            "id": 10,
            "name": "iOS",
            "path": "Electronics > Phones & Accessories > Smartphones > iOS"
        }
    ]

类似这样的东西：

let output = [
  {'Electronics' : {id: 1, name: "electronics", path: "electronics", children: [
        {'Laptops & PC' : {id: 2, name: "Laptops & PC",path: "Electronics > Laptops & PC", children: []}},
        {'Phone & Accessories': {id: 7, name: "Phones & Accessories", path: "Electronics > Phones & Accessories", children: [
              {'Smartphones': {id: 8, name: "Smartphones", path: "Electronics > Phones & Accessories > Smartphones", children: [
                    {'Android': {id: 9, name: "Android", path: "Electronics > Phones & Accessories > Smartphones > Android", children: []}},
                    {'iOS': {id: 10, name: 'iOS', path: "Electronics > Phones & Accessories > Smartphones > iOS", children: []}}
                  ]
                }}
            ]}}
      ]}}
];

我在Stackoverflow (How to convert an array of paths into JSON structure?)上得到了一个类似的解决方案，但我不能使用这些答案向对象添加额外的属性。

有人能帮帮我吗？

Answer 1

我认为[{key: data},{key: data},..]的目标结构有点过头了，我会选择[data,data,..] -这可以很容易地通过拆分每个项目的路径并迭代地移动结果范围来实现：

​

var data =  [
        {
            "id": 1,
            "name": "Electronics",
            "path": "Electronics"
        },
        {
            "id": 2,
            "name": "Laptops & PC",
            "path": "Electronics > Laptops & PC"
        },
        {
            "id": 7,
            "name": "Phones & Accessories",
            "path": "Electronics > Phones & Accessories"
        },
        {
            "id": 8,
            "name": "Smartphones",
            "path": "Electronics > Phones & Accessories > Smartphones"
        },
        {
            "id": 9,
            "name": "Android",
            "path": "Electronics > Phones & Accessories > Smartphones > Android"
        },
        {
            "id": 10,
            "name": "iOS",
            "path": "Electronics > Phones & Accessories > Smartphones > iOS"
        },
        {
            "id": 11,
            "name": "Software",
            "path": "Software"
        },
        {
            "id": 12,
            "name": "Office",
            "path": "Software > Office"
        }
    ],
    result = [];

data.forEach(item => {
  var path = item.path.split(" > "),
      scope = result;
  path.forEach(key => {
    var match = scope.find(obj => obj.name === key);
    if(match === undefined) {
      var child = {
        "id": item.id,
        "name": item.name,
        "path": item.path,
        "children": []
      };
      scope.push(child);
      scope = child.children;
    } else {
      scope = match.children;
    }
  });
});

console.log(result);

​

Answer 2

你可以使用递归函数来支持无限的子代。

​

 const input = [
        {
            "id": 1,
            "name": "Electronics",
            "path": "Electronics"
        },
        {
            "id": 2,
            "name": "Laptops & PC",
            "path": "Electronics > Laptops & PC"
        },
        {
            "id": 7,
            "name": "Phones & Accessories",
            "path": "Electronics > Phones & Accessories"
        },
        {
            "id": 8,
            "name": "Smartphones",
            "path": "Electronics > Phones & Accessories > Smartphones"
        },
        {
            "id": 9,
            "name": "Android",
            "path": "Electronics > Phones & Accessories > Smartphones > Android"
        },
        {
            "id": 10,
            "name": "iOS",
            "path": "Electronics > Phones & Accessories > Smartphones > iOS"
        }
    ]
    
    const output = {}
    const pushToOutput = (path,obj,value) =>{
    const clone = {...value}
    const key = path[0];
        if(obj[key] === undefined){
            obj[key] =clone
            obj[key].children = {};
        }
       path.shift()
       if(path.length > 0){
            return pushToOutput(path,obj[key].children,clone)
       }
       obj[key] = clone

    }
    input.forEach(value=>{
       const path =  value.path.split(" > ")
       pushToOutput(path,output,value)
    })
    
    console.log(output)

​

Answer 3

使用代码将对象转换为json string.If您正在尝试创建一个分层对象，如下所示，您将需要可以通过js解析的json字符串。

使用对象abocve无法生成json对象，如下所示。这是完全不同的结构。

    <script>
var a=[
  {'Electronics' : {id: 1, name: "electronics", path: "electronics", children: [
        {'Laptops & PC' : {id: 2, name: "Laptops & PC",path: "Electronics > Laptops & PC", children: []}},
        {'Phone & Accessories': {id: 7, name: "Phones & Accessories", path: "Electronics > Phones & Accessories", children: [
              {'Smartphones': {id: 8, name: "Smartphones", path: "Electronics > Phones & Accessories > Smartphones", children: [
                    {'Android': {id: 9, name: "Android", path: "Electronics > Phones & Accessories > Smartphones > Android", children: []}},
                    {'iOS': {id: 10, name: 'iOS', path: "Electronics > Phones & Accessories > Smartphones > iOS", children: []}}
                  ]
                }}
            ]}}
      ]}}
];
console.log(JS.stringify(a));
</script>