如何把一个数组json数据,加到已有的树形数据中

要将一个数组的 JSON 数据添加到已有的树形数据中,可以使用递归方法遍历树形数据,并将数组中的每个元素插入到合适的位置。以下是一个使用 JavaScript 实现的示例:

javascript 复制代码
function insertArrayToTree(tree, arrayData) {
  if (!tree || !arrayData) return;

  for (let i = 0; i < tree.length; i++) {
    if (tree[i].id === arrayData[0].parentId) {
      tree[i].children = tree[i].children || [];
      for (let j = 0; j < arrayData.length; j++) {
        tree[i].children.push(arrayData[j]);
      }
      return;
    } else if (tree[i].children && tree[i].children.length > 0) {
      insertArrayToTree(tree[i].children, arrayData);
    }
  }
}

// 示例
const tree = [
  {
    id: 1,
    name: '节点1',
    children: [
      {
        id: 2,
        name: '节点1-1',
        children: [],
      },
    ],
  },
  {
    id: 3,
    name: '节点2',
    children: [],
  },
];

const arrayData = [
  {
    id: 4,
    name: '节点1-2',
    parentId: 2,
  },
  {
    id: 5,
    name: '节点1-3',
    parentId: 2,
  },
];

insertArrayToTree(tree, arrayData);
console.log(tree);

这个示例中,insertArrayToTree 函数接受两个参数:一个是已有的树形数据 tree,另一个是要插入的数组数据 arrayData。函数会遍历树形数据,找到与数组数据第一个元素的父节点,并将数组中的每个元素插入到父节点的 children 数组中。

相关推荐
10年前端老司机10 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js