Reconstruct a deep nested array of object removing an unwanted object

Question

I can't figure out how to remove and object inside a deep nest array of object pointing it by it's id value.

Here is my code using reduce. I wanted to recreate the array on each iteration by it's a big mess (and it's only going through the index 0).

I would like to remove this whole piece by pointing the node id 35993. If the node get a children this would remove the children as well.

const array = [
  {
    node: {
      level: 0,
      id: 71,
      type: "block",
      style: {
        backgroundColor: "#548444",
      },
    },
    children: [
      {
        node: {
          id: 85,
          type: "block",
          style: {
            backgroundColor: "#548444",
            fontSize: "19px",
          },
        },
        children: [
          {
            node: {
              id: 955,
              type: "column",
              style: {
                backgroundColor: "#eee",
                fontSize: "28px",
              },
            },
            children: [
              {
                node: {
                  level: 3,
                  parentId: 71,
                  id: 732,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
              {
                node: {
                  id: 353,
                  parentId: 71,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
            ],
          },
        ],
      },
    ],
  },
  {
    node: {
      level: 0,
      id: 7991,
      type: "block",
      style: {
        backgroundColor: "#548444",
      },
    },
    children: [
      {
        node: {
          id: 8995,
          type: "block",
          style: {
            backgroundColor: "#548444",
            fontSize: "19px",
          },
        },
        children: [
          {
            node: {
              id: 95995,
              type: "column",
              style: {
                backgroundColor: "#eee",
                fontSize: "28px",
              },
            },
            children: [
              {
                node: {
                  level: 3,
                  parentId: 71,
                  id: 73992,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
              {
                node: {
                  id: 35993,
                  parentId: 71,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
            ],
          },
        ],
      },
    ],
  },
];

const search1 = (arr, itemId, nestingKey) =>
  arr.reduce((a, item) => {
    if (a) return a;
    if (item.node.id === itemId) return item;
    if (item[nestingKey]) return search(item[nestingKey], itemId, nestingKey);
  }, null);

const remove = function (arr, itemId, nestingKey) {
  let newArr = [];
  arr.reduce((a, item) => {
    if (item.node.id !== itemId) {
      const tempItem = {
        ...item,
      };
      newArr.push(tempItem);
    }
      
    if (item.node.id === itemId) {
      delete item.node;
      return item;
    }
      
    if (item[nestingKey]) return remove(item[nestingKey], itemId, nestingKey);
  }, null);

  return newArr;
};

const res = remove(array, 35993, "children");
console.log(JSON.stringify(res));

Keith · Accepted Answer · 2021-06-30 19:08:07Z

Mutating the array here is very easy, you don't need to worry about deleting the children anyway, as there part of the item your deleting. Just find the array item you want to remove and then splice it out.

Even if you didn't want a mutated array, it would probabbly be easier to clone / copy and still do it like this.

Example below. I've used id 95995 to show it also deleting children..

const array = [{"node":{"level":0,"id":71,"type":"block","style":{"backgroundColor":"#548444"}},"children":[{"node":{"id":85,"type":"block","style":{"backgroundColor":"#548444","fontSize":"19px"}},"children":[{"node":{"id":955,"type":"column","style":{"backgroundColor":"#eee","fontSize":"28px"}},"children":[{"node":{"level":3,"parentId":71,"id":732,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}},{"node":{"id":353,"parentId":71,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}}]}]}]},{"node":{"level":0,"id":7991,"type":"block","style":{"backgroundColor":"#548444"}},"children":[{"node":{"id":8995,"type":"block","style":{"backgroundColor":"#548444","fontSize":"19px"}},"children":[{"node":{"id":95995,"type":"column","style":{"backgroundColor":"#eee","fontSize":"28px"}},"children":[{"node":{"level":3,"parentId":71,"id":73992,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}},{"node":{"id":35993,"parentId":71,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}}]}]}]}];

function removeById(array, id) {
  for (let ix = 0; ix < array.length; ix += 1) {
    const r = array[ix];
    if (r.node.id === id) {
      array.splice(ix, 1);
    } else {
      if (r.children) removeById(r.children, id);
    }
  }
}

console.log(JSON.stringify(array));

removeById(array, 95995);

console.log(JSON.stringify(array));

Thank you so much it's perfect, I don't know why I tried to make it so complicated.

Collectives™ on Stack Overflow

Reconstruct a deep nested array of object removing an unwanted object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related