如何使用 javascript 在特定 position 的嵌套 object 中添加子節點

Question

我有一個如下給出的數據結構

ds: [
          { id: "0a12", pos: 0, name: "PH1" },
          {
            id: "8f83",
            name: "PH2",
            pos: 1,
            children: [
              { id: "ll54", pos: 0, name: "L1" },
              {
                id: "97cs",
                name: "L2",
                pos: 1,
                children: [
                  { id: "80s3", pos: 0, name: "LL1" },
                  { id: "2dh3", pos: 1, name: "LL2" },
                ],
              },
            ],
          },
          { id: "75fd", pos: 2, name: "PH3" },
          { id: "34jg", pos: 3, name: "PH4" },
        ],

我正在創建一個組織結構圖，其中我可以選擇在左側或右側添加一個節點。 在單擊節點時，如果單擊“LL1”，我可以獲得節點 obj 作為參數（即），我可以獲得 object，以及稱為類型的第二個參數，它將包含“左”或“右”。

所以現在 type == 'left' 那么我的結果數據結構應該像

ds: [
          { id: "0a12", pos: 0, name: "PH1" },
          {
            id: "8f83",
            name: "PH2",
            pos: 1,
            children: [
              { id: "4", pos: 0, name: "L1" },
              {
                id: "5",
                name: "L2",
                pos: 1,
                children: [
                  { id: "36fd", pos: 0, name: "" }, // new node for type === 'left'
                  { id: "80s3", pos: 1, name: "LL1" },
                  { id: "2dh3", pos: 2, name: "LL2" },
                ],
              },
            ],
          },
          { id: "75fd", pos: 2, name: "PH3" },
          { id: "34jg", pos: 3, name: "PH4" },
        ],

如果類型 === 'right'

ds: [
          { id: "0a12", pos: 0, name: "PH1" },
          {
            id: "8f83",
            name: "PH2",
            pos: 1,
            children: [
              { id: "4", pos: 0, name: "L1" },
              {
                id: "5",
                name: "L2",
                pos: 1,
                children: [
                  { id: "80s3", pos: 0, name: "LL1" },
                  { id: "36fd", pos: 1, name: "" }, // new node for type === 'right'
                  { id: "2dh3", pos: 2, name: "LL2" },
                ],
              },
            ],
          },
          { id: "75fd", pos: 2, name: "PH3" },
          { id: "34jg", pos: 3, name: "PH4" },
        ],

注意：對於那些沒有子節點的節點，我們不應該將空數組初始化為 children 屬性

Answer 1

您可以使用Array.slice和spread operator將新節點插入到數組中。

 let data = [ { id: '0a12', pos: 0, name: 'PH1' }, { id: "8f83", name: "PH2", pos: 1, children: [ { id: '4', pos: 0, name: 'L1' }, { id: '5', name: 'L2', pos: 1, children: [ { id: '80s3', pos: 0, name: 'LL1' }, { id: '2dh3', pos: 1, name: 'LL2' }, ], }, ], }, { id: '75fd', pos: 2, name: 'PH3' }, { id: '34jg', pos: 3, name: 'PH4' }, ]; function addNode(direction, idElement, ptr) { const elementIndex = ptr.findIndex(x => x.id === idElement); if (elementIndex === -1) { // Go deeper return ptr.map(x => x.children? {...x, children: addNode(direction, idElement, x.children), }: x); } const offset = direction === 'left'? 0: 1; // Insert the new node in the correct position const mutatedPtr = [...ptr.slice(0, elementIndex + offset), { id: 'XXXX', pos: elementIndex + offset, name: '' }, ...ptr.slice(elementIndex + offset), ]; // change the positions mutatedPtr.forEach((x, xi) => { x.pos = xi; }); return mutatedPtr; } data = addNode('right', '75fd', data); data = addNode('left', '75fd', data); data = addNode('left', '2dh3', data); data = addNode('right', '2dh3', data); console.log(data);

Answer 2

這是一個樹插入問題。 首先，您需要找到錨節點的索引，然后如果 type 為“left”，則在 index 處插入一個新節點，如果 type 為“right”，則在 index + 1 處插入一個新節點。 這是適用於您的情況的解決方案。 請注意，您需要使用您擁有的任何 id 生成器設置正確的“id”。

ds = [
  { id: "0a12", pos: 0, name: "PH1" },
  {
    id: "8f83",
    name: "PH2",
    pos: 1,
    children: [
      { id: "4", pos: 0, name: "L1" },
      {
        id: "5",
        name: "L2",
        pos: 1,
        children: [
          { id: "80s3", pos: 0, name: "LL1" },
          { id: "2dh3", pos: 1, name: "LL2" }
        ]
      }
    ]
  },
  { id: "75fd", pos: 2, name: "PH3" },
  { id: "34jg", pos: 3, name: "PH4" }
];

// Returns parent & position
function findNode(childNodes, name) {
  for (var ii = 0; ii < childNodes.length; ii++) {
    let child = childNodes[ii];
    if (child.name == name) {
      return {
        childNodes: childNodes,
        index: ii
      };
    }
    if (child.children) {
      let result = findNode(child.children, name);
      if (result) {
        return result;
      }
    }
  }
  return null;
}

function rewritePositions(childNodes) {
  for (var ii = 0; ii < childNodes.length; ii++) {
    childNodes[ii].pos = ii;
  }
}

function insertNode(name, type) {
  let searchResult = findNode(ds, name);
  if (!searchResult) {
    return;
  }

  let index = searchResult.index;
  let newPosition = type === "left" ? index : index + 1;
  let newNode = { id: "todo: index", pos: newPosition, name: "" };
  searchResult.childNodes.splice(newPosition, 0, newNode);
  rewritePositions(searchResult.childNodes);
}