递归展平对象数组

Question

我具有以下对象数组。如何将多维对象数组展平为一维对象数组？

[{
    "name":"Locations",
    "children":[
        {
            "name":"U.S."
        },
        {
            "name":"Canada"
        },
        {
            "name":"London"
        }
    ]
},{
    "name":"Benefits",
    "children":[
        {
            "name":"U.S. Benefits",

            "children":[
                {
                    "name":"U.S. Benefits at a Glance"
                },
                {
                    "name":"U.S. Holiday Calendar"
                }
            ]
        },
        {
            "name":"London Benefits",
            "children":[
                {
                    "name":"London Benefits at a Glance"
                },
                {
                    "name":"London Holiday Calendar"
                }
            ]
        },
        {
            "name":"India Benefits",
            "children":[
                {
                    "name":"India Benefits at a Glance"
                },
                {
                    "name":"India Holiday Calendar"
                }
            ]
        }
    ]
}]

我需要所有的孩子在一个单一的维度上与父母处于同一水平，任何帮助将不胜感激。

Answer 1

您可以使用reduce和spread语法在没有lodash的情况下完成此操作。 您只需要为孩子使用递归。

 const data = [{"name":"Locations","children":[{"name":"US"},{"name":"Canada"},{"name":"London"}]},{"name":"Benefits","children":[{"name":"US Benefits","children":[{"name":"US Benefits at a Glance"},{"name":"US Holiday Calendar"}]},{"name":"London Benefits","children":[{"name":"London Benefits at a Glance"},{"name":"London Holiday Calendar"}]},{"name":"India Benefits","children":[{"name":"India Benefits at a Glance"},{"name":"India Holiday Calendar"}]}]}] const flatten = data => { return data.reduce((r, { children, ...rest}) => { r.push(rest); if (children) r.push(...flatten(children)); return r; }, []) } console.log(flatten(data)) 

Answer 2

您可以执行递归循环，并通过使用辅助函数将其追加到运行列表中。

注意：如果要删除“根”虚拟节点，只需对数组进行slice(1) 。

 var flattened = flattenTree({ "name" : "root", // Need a root entry, because the data is an array "children" : getData() // Grab the data at the bottom }, { nameKey : 'name', // The name key; configurable option childrenKey : 'children' // The children key; configurable option }); console.log(flattened); // Flattened data printed to the console function flattenTree(tree, options) { options = options || {}; var nameKey = options.nameKey || 'name'; var childrenKey = options.childrenKey || 'children' var resultList = []; flattenTreeRecurse(tree, resultList, nameKey, childrenKey); return resultList; } /** @private -- Recursive inner-call */ function flattenTreeRecurse(tree, list, nameKey, childrenKey) { var entry = {}; entry[nameKey] = tree[nameKey]; list.push(entry); if (tree[childrenKey] && tree[childrenKey].length > 0) { tree[childrenKey].forEach(child => flattenTreeRecurse(child, list, nameKey, childrenKey)); } } function getData() { return [{ "name": "Locations", "children": [{ "name": "US" }, { "name": "Canada" }, { "name": "London" }] }, { "name": "Benefits", "children": [{ "name": "US Benefits", "children": [{ "name": "US Benefits at a Glance" }, { "name": "US Holiday Calendar" }] }, { "name": "London Benefits", "children": [{ "name": "London Benefits at a Glance" }, { "name": "London Holiday Calendar" }] }, { "name": "India Benefits", "children": [{ "name": "India Benefits at a Glance" }, { "name": "India Holiday Calendar" }] } ] }]; } 

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

Answer 3

将@ nenad-vracar的答案修改为更可重用的样式：

 const mock = [{"name":"Locations","children":[{"name":"US"},{"name":"Canada"},{"name":"London"}]},{"name":"Benefits","children":[{"name":"US Benefits","children":[{"name":"US Benefits at a Glance"},{"name":"US Holiday Calendar"}]},{"name":"London Benefits","children":[{"name":"London Benefits at a Glance"},{"name":"London Holiday Calendar"}]},{"name":"India Benefits","children":[{"name":"India Benefits at a Glance"},{"name":"India Holiday Calendar"}]}]}]; const flatDeepByKey = (data, key) => { return data.reduce((prev, el) => { prev.push(el); if (el[key]) { prev.push(...flatDeepByKey(el[key], key)) }; return prev; }, []) }; console.log(flatDeepByKey(mock, 'children'));