javascript - 通过 ID 或路径在多维数组/对象中移动 Javascript 对象？

Question

我正在开发一种新的拖放式可嵌套菜单管理员，它使用 JSON 作为源数据并始终从 JSON 重建，而不是希望.serialize()人们继续使用的功能能够正常工作。

这是我所在位置的链接：https ://codepen.io/ajhalls-the-selector/pen/qBaPRyr

我有几个辅助函数可以从事件中得到一些我需要的东西。我需要能够将元素（包括所有子元素）移动或复制到新的目的地。复制部分很简单，但事实证明这一举动更具挑战性，所以我正在寻求帮助。

如果我拖到Harry，Gwen我会希望Harry嵌套在 下Gwen。通过使用回调，我知道每个元素的 id，我还可以使用函数获取每个元素的路径findPath，但是如何移动它呢？

使用该moveJson()功能，我可以轻松地将项目添加到新位置，但我似乎找不到如何删除原始位置。

function moveJson( Path, NewItem){
    
    eval(Path).children.push(NewItem); // this works to copy
    delete NewItem;
    eval(delete NewItem); //also tried
    delete eval(NewItem); // and this
}
moveJson('jsonData[0]["children"][1]["children"][0]',jsonData[1]);

我尝试了多种方法来使用字符串传递变量，或者不使用字符串，以及多种删除方法。我尝试创建要返回的新对象而不是修改全局对象。我尝试将它展平，然后在展平和未展平时移动它，但是string.includes()当你给它带括号的字符串时它不起作用。

关于使用对象的 ID 或使用其绝对路径重新定位对象的更简单方法的任何提示？

作为旁注，我意识到eval()不鼓励，但不确定是否有更好的方法来保持动态。因为我不知道这个数据集的嵌套有多深，所以使用来自的字符串结果既findPath好又容易。

这是我正在使用的数据：

var jsonData = [
  {
    "id": 1,
    "parent_id": "0",
    "capacity": 2,
    "name": "Alan",
    "group": "BootstrapGlyphicon",
    "code": "",
    "prefix": "",
    "modifier": "",
    "custom": "",
    "sortorder": null,
    "status": "INACTIVE",
    "ui": {
      "draggable": "true",
      "ondragstart": "dragstart_handler(event);",
      "ondragend": "dragend_handler(event);",
      "ondrop": "drop_handler(event);",
      "ondragover": "dragover_handler(event);"
    },
    "children": [
      {
        "id": 2,
        "parent_id": "1",
        "capacity": 2,
        "name": "Samantha",
        "group": "BootstrapGlyphicon",
        "code": "",
        "prefix": "",
        "modifier": "",
        "custom": "",
        "sortorder": null,
        "status": "INACTIVE",
        "ui": {
          "draggable": "true",
          "ondragstart": "dragstart_handler(event);",
          "ondragend": "dragend_handler(event);",
          "ondrop": "drop_handler(event);",
          "ondragover": "dragover_handler(event);"
        },
        "children": [{
            "id": "5",
            "parent_id": "3",
            "capacity": 2,
            "name": "Harry",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          },{
            "id": "7",
            "parent_id": "3",
            "capacity": 2,
            "name": "Pepper",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          }]
      },
      {
        "id": 3,
        "parent_id": "1",
        "capacity": 2,
        "name": "Charlie",
        "group": "BootstrapGlyphicon",
        "code": "",
        "prefix": "",
        "modifier": "",
        "custom": "",
        "sortorder": null,
        "status": "INACTIVE",
        "ui": {
          "draggable": "true",
          "ondragstart": "dragstart_handler(event);",
          "ondragend": "dragend_handler(event);",
          "ondrop": "drop_handler(event);",
          "ondragover": "dragover_handler(event);"
        },
        "children": [
          {
            "id": 4,
            "parent_id": "3",
            "capacity": 2,
            "name": "Gwen",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          }
        ]
      }
    ]
  },
        {
            "id": 6,
            "parent_id": "3",
            "capacity": 2,
            "name": "David",
            "group": "BootstrapGlyphicon",
            "code": "",
            "prefix": "",
            "modifier": "",
            "custom": "",
            "sortorder": null,
            "status": "INACTIVE",
            "ui": {
              "draggable": "true",
              "ondragstart": "dragstart_handler(event);",
              "ondragend": "dragend_handler(event);",
              "ondrop": "drop_handler(event);",
              "ondragover": "dragover_handler(event);"
            },
            "children": []
          }
];

标签： javascriptjsonmultidimensional-array