将分层路径数组转换为 JSON

Question

我有一个带有 ID 的路径列表，我需要将它转换成完整的 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: []}}
                  ]
                }}
            ]}}
      ]}}
];

我在 Whosebug 上得到了类似的解决方案 () 但是我无法使用这些答案向对象添加额外的属性。

有人可以帮我吗？

Answer 1

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

使用对象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>

Answer 2

我认为 [{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 3

你可以用递归函数来支持无限children。

 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)

将分层路径数组转换为 JSON

Convert array of Hierarchical paths to JSON

javascript

json

hierarchy

javascript-objects