哪位大佬帮忙瞅一下，后端返回的树状结构的数据没有 pid和id，（后端传来的children不确定多少级），如何给树结构数据增加 pid和id？

Question

[
    {
        "value": "zhinan",
        "label": "指南",
        "children": [
            {
                "value": "shejiyuanze",
                "label": "设计原则",
                "children": [
                    {
                        "value": "yizhi",
                        "label": "一致"
                    },
                    {
                        "value": "fankui",
                        "label": "反馈"
                    },
                    {
                        "value": "xiaolv",
                        "label": "效率"
                    },
                    {
                        "value": "kekong",
                        "label": "可控"
                    }
                ]
            },
            {
                "value": "daohang",
                "label": "导航",
                "children": [
                    {
                        "value": "cexiangdaohang",
                        "label": "侧向导航"
                    },
                    {
                        "value": "dingbudaohang",
                        "label": "顶部导航"
                    }
                ]
            }
        ]
    },
    {
        "value": "zujian",
        "label": "组件",
        "children": [
            {
                "value": "basic",
                "label": "Basic",
                "children": [
                    {
                        "value": "layout",
                        "label": "Layout 布局"
                    },
                    {
                        "value": "color",
                        "label": "Color 色彩"
                    },
                    {
                        "value": "typography",
                        "label": "Typography 字体"
                    },
                    {
                        "value": "icon",
                        "label": "Icon 图标"
                    },
                    {
                        "value": "button",
                        "label": "Button 按钮"
                    }
                ]
            },
            {
                "value": "form",
                "label": "Form",
                "children": [
                    {
                        "value": "radio",
                        "label": "Radio 单选框"
                    },
                    {
                        "value": "checkbox",
                        "label": "Checkbox 多选框"
                    },
                    {
                        "value": "input",
                        "label": "Input 输入框"
                    },
                    {
                        "value": "input-number",
                        "label": "InputNumber 计数器"
                    },
                    {
                        "value": "select",
                        "label": "Select 选择器"
                    },
                    {
                        "value": "cascader",
                        "label": "Cascader 级联选择器"
                    },
                    {
                        "value": "switch",
                        "label": "Switch 开关"
                    },
                    {
                        "value": "slider",
                        "label": "Slider 滑块"
                    },
                    {
                        "value": "time-picker",
                        "label": "TimePicker 时间选择器"
                    },
                    {
                        "value": "date-picker",
                        "label": "DatePicker 日期选择器"
                    },
                    {
                        "value": "datetime-picker",
                        "label": "DateTimePicker 日期时间选择器"
                    },
                    {
                        "value": "upload",
                        "label": "Upload 上传"
                    },
                    {
                        "value": "rate",
                        "label": "Rate 评分"
                    },
                    {
                        "value": "form",
                        "label": "Form 表单"
                    }
                ]
            },
            {
                "value": "data",
                "label": "Data",
                "children": [
                    {
                        "value": "table",
                        "label": "Table 表格"
                    },
                    {
                        "value": "tag",
                        "label": "Tag 标签"
                    },
                    {
                        "value": "progress",
                        "label": "Progress 进度条"
                    },
                    {
                        "value": "tree",
                        "label": "Tree 树形控件"
                    },
                    {
                        "value": "pagination",
                        "label": "Pagination 分页"
                    },
                    {
                        "value": "badge",
                        "label": "Badge 标记"
                    }
                ]
            },
            {
                "value": "notice",
                "label": "Notice",
                "children": [
                    {
                        "value": "alert",
                        "label": "Alert 警告"
                    },
                    {
                        "value": "loading",
                        "label": "Loading 加载"
                    },
                    {
                        "value": "message",
                        "label": "Message 消息提示"
                    },
                    {
                        "value": "message-box",
                        "label": "MessageBox 弹框"
                    },
                    {
                        "value": "notification",
                        "label": "Notification 通知"
                    }
                ]
            },
            {
                "value": "navigation",
                "label": "Navigation",
                "children": [
                    {
                        "value": "menu",
                        "label": "NavMenu 导航菜单"
                    },
                    {
                        "value": "tabs",
                        "label": "Tabs 标签页"
                    },
                    {
                        "value": "breadcrumb",
                        "label": "Breadcrumb 面包屑"
                    },
                    {
                        "value": "dropdown",
                        "label": "Dropdown 下拉菜单"
                    },
                    {
                        "value": "steps",
                        "label": "Steps 步骤条"
                    }
                ]
            },
            {
                "value": "others",
                "label": "Others",
                "children": [
                    {
                        "value": "dialog",
                        "label": "Dialog 对话框"
                    },
                    {
                        "value": "tooltip",
                        "label": "Tooltip 文字提示"
                    },
                    {
                        "value": "popover",
                        "label": "Popover 弹出框"
                    },
                    {
                        "value": "card",
                        "label": "Card 卡片"
                    },
                    {
                        "value": "carousel",
                        "label": "Carousel 走马灯"
                    },
                    {
                        "value": "collapse",
                        "label": "Collapse 折叠面板"
                    }
                ]
            }
        ]
    },
    {
        "value": "ziyuan",
        "label": "资源",
        "children": [
            {
                "value": "axure",
                "label": "Axure Components"
            },
            {
                "value": "sketch",
                "label": "Sketch Templates"
            },
            {
                "value": "jiaohu",
                "label": "组件交互文档"
            }
        ]
    }
]

Answer 1

  function addId(tree) {
    let id = 0;
    return setIdAndPid(tree, null);
    function setIdAndPid(arr, pid = null) {
      for (let i = 0, len = arr.length; i < len; i++) {
        arr[i].pid = pid;
        arr[i].id = id;
        if (arr[i].children) {
          setIdAndPid(arr[i].children, id, id++);
        }
        id++;
      }
      return arr;
    }
  }
  const result = addId(tree);
  console.log(result);

不太理解为什么是前端去加这个东西，一般需求是后端返回扁平的结构根据pid,id转成树

Answer 2

这都已经转成树结构了, 还要pid干嘛?
前端用, 直接给里随便加个数字就行. 迭代按顺序增加就好了.

Answer 3

让后端返数据的时候加上id和pid就行了。不可能存数据的时候就是树形的，他肯定需要自己组装的。

如果后端不愿意给你加，那么你就只能自己通过value去当作key来递归了。