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

相关推荐
over6975 小时前
用 React Context 实现全局主题切换:从零搭建暗黑/亮色模式系统
前端·react.js·面试
ycgg5 小时前
深入理解 AbortSignal:前端异步操作取消的原生方案
前端
妮妮喔妮5 小时前
前端字节面试大纲
前端·面试·职场和发展
白兰地空瓶5 小时前
告别“千里传荔枝”:React useContext 打造跨层级通信“任意门”
前端·react.js
小笔学长5 小时前
内存管理:避免内存泄漏的方法
javascript·性能优化·前端开发·内存泄漏避免
恋猫de小郭5 小时前
Flutter 小技巧之帮网友理解 SliverConstraints overlap
android·前端·flutter
小oo呆5 小时前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Structured Output
前端·javascript·easyui
Mapmost5 小时前
【高斯泼溅】3DGS城市模型从“硬盘杀手”到“轻盈舞者”?看我们如何实现14倍压缩
前端
AC赳赳老秦5 小时前
农业智能化:DeepSeek赋能土壤与气象数据分析,精准预测病虫害,守护丰收希望
java·前端·mongodb·elasticsearch·html·memcache·deepseek
咖啡の猫6 小时前
TypeScript-webpack
javascript·webpack·typescript