请问这个数据怎么处理:点击树形结构节点,右侧面包屑按照父子节点显示名字,感谢解答!

程序媛
  • 67

image.png

//以下是数据结构

  {
                "goodsCategoryId": 14838,
                "goodsCategoryName": "男装",
                "goodsCategoryLevel": 1,
                "goodsCategoryFatherId": 0,
                "childCount": null,
                "goodsCategoryChildList": [
                    {
                        "goodsCategoryId": 14839,
                        "goodsCategoryName": "男上装",
                        "goodsCategoryLevel": 2,
                        "goodsCategoryFatherId": 14838,
                        "childCount": null,
                        "goodsCategoryChildList": [
                            {
                                "goodsCategoryId": 14841,
                                "goodsCategoryName": "男式T恤",
                                "goodsCategoryLevel": 3,
                                "goodsCategoryFatherId": 14839,
                                "childCount": null,
                                "goodsCategoryChildList": []
                            },
                            {
                                "goodsCategoryId": 14840,
                                "goodsCategoryName": "男式背心/马夹",
                                "goodsCategoryLevel": 3,
                                "goodsCategoryFatherId": 14839,
                                "childCount": null,
                                "goodsCategoryChildList": []
                            }
                        ]
                    }
                ]
            },
回复
阅读 1.1k
2 个回答

image.png
https://codepen.io/1567887123...

/**
 * 找树型节点的路径
 * @param list 树型数据
 * @param filter 过滤条件
 * @returns [] 结果数组
 */
let findTreePath = (list = [], filter = {}) => {
  return [...list].reduce((acc, cur, idx, arr) => {// 解构取消引用
    var res = findTreePath(cur.children, filter); // 查找下级节点
    if ( Object.entries(filter).every(([key, val]) => cur[key] === val) ||res.length) {
      //找到子节点
      acc.push(cur.label, ...res); //添加当前节点和子节点
      arr.length = 0; //结束reduce循环
    }
    return acc;
  }, []);
};

重新处理一下你的数据结构,变成父子循环引用的,这样,每个节点都可以通过parent找到其父节点,直至到顶层节点,代码中的{goodsCategoryId: 0}就是默认的顶层节点

// 重新处理一下你的数据,将结构变成循环引用的
const data = [{
  "goodsCategoryId": 14838,
  "goodsCategoryName": "男装",
  "goodsCategoryLevel": 1,
  "goodsCategoryFatherId": 0,
  "childCount": null,
  "goodsCategoryChildList": [
      {
          "goodsCategoryId": 14839,
          "goodsCategoryName": "男上装",
          "goodsCategoryLevel": 2,
          "goodsCategoryFatherId": 14838,
          "childCount": null,
          "goodsCategoryChildList": [
              {
                  "goodsCategoryId": 14841,
                  "goodsCategoryName": "男式T恤",
                  "goodsCategoryLevel": 3,
                  "goodsCategoryFatherId": 14839,
                  "childCount": null,
                  "goodsCategoryChildList": []
              },
              {
                  "goodsCategoryId": 14840,
                  "goodsCategoryName": "男式背心/马夹",
                  "goodsCategoryLevel": 3,
                  "goodsCategoryFatherId": 14839,
                  "childCount": null,
                  "goodsCategoryChildList": []
              }
          ]
      }
  ]
}];
// 递归,为每个子节点设置父节点的引用
function traverseTree(parent, children) {
  // 子节点的数量
  parent.childCount = children.length;
  // 遍历子节点,设置每个子节点的parent
  children.forEach(item => {
    item.parent = parent;
    traverseTree(item, item.goodsCategoryChildList)
  })
}

traverseTree({goodsCategoryId: 0}, data);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏