如何把一个数组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 数组中。

相关推荐
MegatronKing2 分钟前
一个有意思的问题引起了我的反思
前端·后端·测试
JohnYan8 分钟前
Bun技术评估 - 30 SSE支持
javascript·后端·bun
鹤归时起雾.14 分钟前
CSS属性继承与元素隐藏全解析
前端·css
yzx99101317 分钟前
一个嵌入式存储芯片质量评估系统的网页界面设计
开发语言·javascript·ecmascript
火星数据-Tina20 分钟前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot
fruge31 分钟前
前端可视化家庭账单:用 ECharts 实现支出统计与趋势分析
前端·javascript·echarts
IT_陈寒1 小时前
Vue3性能优化实战:5个被低估的Composition API技巧让你的应用快30%
前端·人工智能·后端
嘻嘻哈哈猿人1 小时前
从 0 到 1 实现一个支持 @ 提及用户的输入框组件(Vue3 实战)
前端·vue.js
东土也1 小时前
Vue 项目 Nginx 部署路径差异分析与部署指南
前端
云枫晖1 小时前
Vue3 响应式原理:手写实现 ref 函数
前端·vue.js