从Javascript中的对象数组中重新创建对象

Question

我需要以下方面的帮助：

我正在尝试使用反应树菜单。创建一个可过滤的wordpress导航菜单

“树”菜单组件需要以下数据结构：

{
    "Home" : {
      checkbox: false,
      ID: 1,
      children: {
        "Getting Started" : {
          checkbox: false,
          ID: 47,
          slug: 'getting-started',
        },
        "Interaction Design Principles": {
          checkbox: false,
          children: {
            "Design Principle the First" : {
              selected: false,
              checkbox: false,
              ID: 67
            }
          }
        }
      }
    },
    "UPS Mobile (iOs, Android)" : {
      checkbox: false,
      children: {
        "Overview" : {
          checkbox: false,
          ID: 22
        },
        "Reference" : {
          checkbox: false,
          ID: 14
        }
      }
    },
    "mDot" : {
      checkbox: false,
      children: {
        "Elements" : {
          checkbox: false,
          ID: 19,
          children: {
            "Navigation" : {
              checkbox: false,
              ID: 90
            }
          }
        },
      }
    }
  }

我已经在wordpress中设置了上面的父和子页面，并且创建了一个层次化的wordpress菜单。我正在使用wordpress菜单api

它返回以下数据结构：

[
  {
    "ID": 46,
    "order": 1,
    "parent": 0,
    "title": "Home",
    "attr": "",
    "target": "",
    "classes": "",
    "xfn": "",
    "description": "",
    "object_id": 2,
    "object": "page",
    "type": "post_type",
    "type_label": "Page",
    "children": [
      {
        "ID": 47,
        "order": 2,
        "parent": 46,
        "title": "Getting Started",
        "url": "http://mobilestyle.ups.dev/home/getting-started/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 15,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": []
      },
      {
        "ID": 48,
        "order": 3,
        "parent": 46,
        "title": "Interaction Design Principles",
        "url": "http://mobilestyle.ups.dev/home/interaction-design-principles/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 22,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": [
          {
            "ID": 49,
            "order": 4,
            "parent": 48,
            "title": "Design Principle the First",
            "url": "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/",
            "attr": "",
            "target": "",
            "classes": "",
            "xfn": "",
            "description": "",
            "object_id": 24,
            "object": "page",
            "type": "post_type",
            "type_label": "Page",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "ID": 50,
    "order": 5,
    "parent": 0,
    "title": "mDot",
    "url": "http://mobilestyle.ups.dev/mdot/",
    "attr": "",
    "target": "",
    "classes": "",
    "xfn": "",
    "description": "",
    "object_id": 8,
    "object": "page",
    "type": "post_type",
    "type_label": "Page",
    "children": [
      {
        "ID": 51,
        "order": 6,
        "parent": 50,
        "title": "Elements",
        "url": "http://mobilestyle.ups.dev/mdot/elements/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 30,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": [
          {
            "ID": 52,
            "order": 7,
            "parent": 51,
            "title": "Navigation",
            "url": "http://mobilestyle.ups.dev/mdot/elements/navigation/",
            "attr": "",
            "target": "",
            "classes": "",
            "xfn": "",
            "description": "",
            "object_id": 32,
            "object": "page",
            "type": "post_type",
            "type_label": "Page",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "ID": 54,
    "order": 8,
    "parent": 0,
    "title": "UPS Mobile (iOS, Android)",
    "url": "http://mobilestyle.ups.dev/ups-mobile/",
    "attr": "",
    "target": "",
    "classes": "",
    "xfn": "",
    "description": "",
    "object_id": 13,
    "object": "page",
    "type": "post_type",
    "type_label": "Page",
    "children": [
      {
        "ID": 55,
        "order": 9,
        "parent": 54,
        "title": "Overview",
        "url": "http://mobilestyle.ups.dev/ups-mobile/overview/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 26,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": []
      },
      {
        "ID": 56,
        "order": 10,
        "parent": 54,
        "title": "Reference",
        "url": "http://mobilestyle.ups.dev/ups-mobile/reference/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 28,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": []
      }
    ]
  }
]

有人能帮我把我从wordpress菜单api中收到的东西转换成Tree菜单组件所期望的吗？

提前感谢您的帮助。-Ian

Answer 1

我会使用一个递归函数来构建您想要的对象。如下所示：

function buildMenu(source, result) {
  //build a return value if one wasn't passed in
  result = result || {};
  
  if (source && source.length) {
    
    var item = source.shift(); //take first item from the array
    result[item.title] = { ID : item.ID }; //make a new property in the result

    //if there are children, build them recursively
    if (item.children && item.children.length) {
      result[item.title].children = buildMenu(item.children);
    }
    
    //build additional items recursively, based on the remaining items in the array
    return buildMenu(source, result);
    
  } else {
    //none left, done
    return result;
  }
}

在源数组上调用该函数，它应该可以工作。下面有一个运行的示例，如果您想尝试它的话。

​

function buildMenu(source, result) {
  result = result || {};
  
  if (source && source.length) {
    
    var item = source.shift();
    result[item.title] = { ID : item.ID };
    
    if (item.children && item.children.length) {
      result[item.title].children = buildMenu(item.children);
    }
    
    return buildMenu(source, result);
    
  } else {
    return result;  
  }
}

var source = [
  {
    "ID": 46,
    "order": 1,
    "parent": 0,
    "title": "Home",
    "attr": "",
    "target": "",
    "classes": "",
    "xfn": "",
    "description": "",
    "object_id": 2,
    "object": "page",
    "type": "post_type",
    "type_label": "Page",
    "children": [
      {
        "ID": 47,
        "order": 2,
        "parent": 46,
        "title": "Getting Started",
        "url": "http://mobilestyle.ups.dev/home/getting-started/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 15,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": []
      },
      {
        "ID": 48,
        "order": 3,
        "parent": 46,
        "title": "Interaction Design Principles",
        "url": "http://mobilestyle.ups.dev/home/interaction-design-principles/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 22,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": [
          {
            "ID": 49,
            "order": 4,
            "parent": 48,
            "title": "Design Principle the First",
            "url": "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/",
            "attr": "",
            "target": "",
            "classes": "",
            "xfn": "",
            "description": "",
            "object_id": 24,
            "object": "page",
            "type": "post_type",
            "type_label": "Page",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "ID": 50,
    "order": 5,
    "parent": 0,
    "title": "mDot",
    "url": "http://mobilestyle.ups.dev/mdot/",
    "attr": "",
    "target": "",
    "classes": "",
    "xfn": "",
    "description": "",
    "object_id": 8,
    "object": "page",
    "type": "post_type",
    "type_label": "Page",
    "children": [
      {
        "ID": 51,
        "order": 6,
        "parent": 50,
        "title": "Elements",
        "url": "http://mobilestyle.ups.dev/mdot/elements/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 30,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": [
          {
            "ID": 52,
            "order": 7,
            "parent": 51,
            "title": "Navigation",
            "url": "http://mobilestyle.ups.dev/mdot/elements/navigation/",
            "attr": "",
            "target": "",
            "classes": "",
            "xfn": "",
            "description": "",
            "object_id": 32,
            "object": "page",
            "type": "post_type",
            "type_label": "Page",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "ID": 54,
    "order": 8,
    "parent": 0,
    "title": "UPS Mobile (iOS, Android)",
    "url": "http://mobilestyle.ups.dev/ups-mobile/",
    "attr": "",
    "target": "",
    "classes": "",
    "xfn": "",
    "description": "",
    "object_id": 13,
    "object": "page",
    "type": "post_type",
    "type_label": "Page",
    "children": [
      {
        "ID": 55,
        "order": 9,
        "parent": 54,
        "title": "Overview",
        "url": "http://mobilestyle.ups.dev/ups-mobile/overview/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 26,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": []
      },
      {
        "ID": 56,
        "order": 10,
        "parent": 54,
        "title": "Reference",
        "url": "http://mobilestyle.ups.dev/ups-mobile/reference/",
        "attr": "",
        "target": "",
        "classes": "",
        "xfn": "",
        "description": "",
        "object_id": 28,
        "object": "page",
        "type": "post_type",
        "type_label": "Page",
        "children": []
      }
    ]
  }
];

var dest = buildMenu(source);
console.log(dest);

​

Answer 2

下面是一个非常简单的递归版本：

​

const buildMenu = (xs) =>
  xs .reduce ((a, {title, ID, children}) => ((a [title] = {
    checkbox: false, ID, ... (children .length ? {children: buildMenu (children)} : {})
  }), a), {})

const source = [{ID: 46, order: 1, parent: 0, title: "Home", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 2, object: "page", type: "post_type", type_label: "Page", children: [{ID: 47, order: 2, parent: 46, title: "Getting Started", url: "http://mobilestyle.ups.dev/home/getting-started/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 15, object: "page", type: "post_type", type_label: "Page", children: []}, {ID: 48, order: 3, parent: 46, title: "Interaction Design Principles", url: "http://mobilestyle.ups.dev/home/interaction-design-principles/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 22, object: "page", type: "post_type", type_label: "Page", children: [{ID: 49, order: 4, parent: 48, title: "Design Principle the First", url: "http://mobilestyle.ups.dev/home/interaction-design-principles/design-principle-the-first/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 24, object: "page", type: "post_type", type_label: "Page", children: []}]}]}, {ID: 50, order: 5, parent: 0, title: "mDot", url: "http://mobilestyle.ups.dev/mdot/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 8, object: "page", type: "post_type", type_label: "Page", children: [{ID: 51, order: 6, parent: 50, title: "Elements", url: "http://mobilestyle.ups.dev/mdot/elements/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 30, object: "page", type: "post_type", type_label: "Page", children: [{ID: 52, order: 7, parent: 51, title: "Navigation", url: "http://mobilestyle.ups.dev/mdot/elements/navigation/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 32, object: "page", type: "post_type", type_label: "Page", children: []}]}]}, {ID: 54, order: 8, parent: 0, title: "UPS Mobile (iOS,  Android)", url: "http://mobilestyle.ups.dev/ups-mobile/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 13, object: "page", type: "post_type", type_label: "Page", children: [{ID: 55, order: 9, parent: 54, title: "Overview", url: "http://mobilestyle.ups.dev/ups-mobile/overview/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 26, object: "page", type: "post_type", type_label: "Page", children: []}, {ID: 56, order: 10, parent: 54, title: "Reference", url: "http://mobilestyle.ups.dev/ups-mobile/reference/", attr: "", target: "", classes: "", xfn: "", description: "", object_id: 28, object: "page", type: "post_type", type_label: "Page", children: []}]}]

console .log (buildMenu (source))

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

​

我们将数组折叠成一个对象，用一个由ID组成的简单值添加当前标题的属性，这是一个任意假的checkbox属性(这实际上是从输入派生的吗？)而且--如果我们的节点有子节点--这些子节点重复出现的结果。