我有一个对象数组:

const arr = [
  {

    "topicId": 1,
    "topicName": "Topic 1",
    "topicIcon": {
      "name": "Caret",
      "class": "lmnicon lmnicon-caret-right"
    },
    "topicContent": "T1 topic content",

    "children": [
      {
        "topicId": 4,
        "topicName": "Topic 4",
        "topicIcon": {
          "name": "Caret",
          "class": "lmnicon lmnicon-caret-right"
        },
        "topicContent": "T4 topic content"

      },
      {
        "topicId": 5,
        "topicName": "Topic 5",
        "topicIcon": {
          "name": "Caret",
          "class": "lmnicon lmnicon-caret-right"
        },
        "children": [
          {
            "topicId": 6,
            "topicName": "Topic 6",
            "topicIcon": {
              "name": "Caret",
              "class": "lmnicon lmnicon-caret-right"
            }
          },
          {
            "topicId": 7,
            "topicName": "Topic 7",
            "topicIcon": {
              "name": "Caret",
              "class": "lmnicon lmnicon-caret-right"
            }
          },
          {
            "topicId": 8,
            "topicName": "Topic 8",
            "topicIcon": {
              "name": "Caret",
              "class": "lmnicon lmnicon-caret-right"
            }
          },
        ]
      }
    ]
  },
  {
    "topicId": 2,
    "topicName": "Topic 2",
    "topicIcon": {
      "name": "Caret",
      "class": "lmnicon lmnicon-caret-right"
    },
    "topicContent": "T2 topic content",

    "children": [
      {
        "topicId": 9,
        "topicName": "Topic 9",
        "topicIcon": {
          "name": "Caret",
          "class": "lmnicon lmnicon-caret-right"
        }

      },
      {
        "topicId": 10,
        "topicName": "Topic 10",
        "topicIcon": {
          "name": "Caret",
          "class": "lmnicon lmnicon-caret-right"
        }
      }
    ]
  }
]

const mapHeirarchy = list => list.flatMap(({ topicId, topicName, topicIcon,  children = [] }) => {
  const obj = {
    'topicId': topicId,
    'topicName': topicName,
    'topicIcon': topicIcon,
    'droppable': true, //add this
    'draggable': true  //add this
  }
  return [obj, ...mapHeirarchy(children)]
});
console.log(mapHeirarchy(arr))

我需要在对象和嵌套子对象中添加这两个属性droppabledraggable,因为它们可能有‘n’层深.

虽然我添加了属性,但我需要回到原来的‘arr’ struct .

我不确定我们如何才能回到过go ,或者有更正确的方法来实现这一点.

推荐答案

简单地说是map,而不是平面array.

const
    array = [{ topicId: 1, topicName: "Topic 1", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" }, topicContent: "T1 topic content", children: [{ topicId: 4, topicName: "Topic 4", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" }, topicContent: "T4 topic content" }, { topicId: 5, topicName: "Topic 5", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" }, children: [{ topicId: 6, topicName: "Topic 6", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" } }, { topicId: 7, topicName: "Topic 7", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" } }, { topicId: 8, topicName: "Topic 8", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" } }] }] }, { topicId: 2, topicName: "Topic 2", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" }, topicContent: "T2 topic content", children: [{ topicId: 9, topicName: "Topic 9", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" } }, { topicId: 10, topicName: "Topic 10", topicIcon: { name: "Caret", class: "lmnicon lmnicon-caret-right" } }] }],
    droppable = true,
    draggable = true,
    mapHierarchy = list => list.map(({ children, ...o }) => ({
        ...o, 
        droppable, 
        draggable,
        ...(children && { children: mapHierarchy(children) })
    }));
    
console.log(mapHierarchy(array));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Javascript相关问答推荐

React存档iframe点击行为

vscode扩展-webView Panel按钮不起任何作用

模块与独立组件

Plotly热图:在矩形上zoom 后将zoom 区域居中

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

React Code不在装载上渲染数据,但在渲染上工作

将自定义排序应用于角形数字数组

当运行d3示例代码时,没有显示任何内容

手机上的渲染错误文本必须在文本组件中渲染,但在浏览器上没有问题<><>

如何在模块层面提供服务?

setcallback是什么时候放到macrotask队列上的?

使用Promise.All并发解决时,每个promise 的线性时间增加?

无法避免UV:flat的插值:非法使用保留字"

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

有没有办法通过使用不同数组中的值进行排序

为什么我不能使用其同级元素调用和更新子元素?

JavaScript:多个图像错误处理程序

脚本语法错误只是一个字符串,而不是一个对象?

Reaction-在同一页内滚动导航(下拉菜单)

如何格式化API的响应