Delete items from the array based on the relationship between them

Question

Delete items from the array based on the relationship between them

Looking for a way to remove elements in an array based on their relationships with each other?

For example:

  const array = [
    {
      id: 14098,
      parent: 14096,
    },
    {
      id: 14100,
      parent: 0,
    },
    {
      id: 14096,
      parent: 14100,
    },
  ];

The task at hand involves iterating through the array and deleting the parent element. In doing so, all child elements associated with that parent should also be removed... and even child elements of those child elements.

Any suggestions on how to approach this?

Best regards,

Ricardo

javascript arrays

Answer 1

Answer №1

Even though Stack Overflow isn't a platform for receiving free coding solutions, I found this problem intriguing and decided to take a shot at it. The approach I took was to identify all the elements that need to be removed first before actually removing them.

let array = [{
    id: 14098,
    parent: 14096,
  },
  {
    id: 14100,
    parent: 0,
  },
  {
    id: 14096,
    parent: 14100,
  },
  {
    id: 14097,
    parent: 14000,
  },
  {
    id: 15098,
    parent: 14098,
  },
  {
    id: 3,
    parent: 0,
  },
];



function getNewArrayWithRemovedIds(origArray, removeid) {
  let removearray = [removeid]
  const cb = (e) => (e.parent == removeid && removearray.push(e.id))
  let x = array
  while (x.length > 0) {
    x = origArray.filter(el => cb(el))
    if (x.length > 0) removeid = x[0].id
  }
  return origArray.filter(el => removearray.indexOf(el.id) == -1);
}
console.log(getNewArrayWithRemovedIds(array, 14100))

Answer 2

Even though Stack Overflow isn't a platform for receiving free coding solutions, I found this problem intriguing and decided to take a shot at it. The approach I took was to identify all the elements that need to be removed first before actually removing them.

let array = [{
    id: 14098,
    parent: 14096,
  },
  {
    id: 14100,
    parent: 0,
  },
  {
    id: 14096,
    parent: 14100,
  },
  {
    id: 14097,
    parent: 14000,
  },
  {
    id: 15098,
    parent: 14098,
  },
  {
    id: 3,
    parent: 0,
  },
];



function getNewArrayWithRemovedIds(origArray, removeid) {
  let removearray = [removeid]
  const cb = (e) => (e.parent == removeid && removearray.push(e.id))
  let x = array
  while (x.length > 0) {
    x = origArray.filter(el => cb(el))
    if (x.length > 0) removeid = x[0].id
  }
  return origArray.filter(el => removearray.indexOf(el.id) == -1);
}
console.log(getNewArrayWithRemovedIds(array, 14100))

Answer 3

Answer №2

Here is the proposed approach:

function cleanArray(array, element) {
    let prevSize = -1;
    let currentSize = array.length;
    let blacklist = [element];
    while (prevSize != currentSize) {
        prevSize = currentSize;
        array = array.filter((item) => {
            if ((blacklist.indexOf(item.parent) >= 0) || (blacklist.indexOf(item.element) >= 0)) blacklist.push(item.element);
            else return true;
        });
        currentSize = array.length;
    }
    return array;
}
  const data = [
    {
      element: 14098,
      parent: 14096,
    },
    {
      element: 14100,
      parent: 0,
    },
    {
      element: 14096,
      parent: 14100,
    },
    {
      element: 5,
      parent: 6
    }
  ];
  
  console.log(cleanArray(data, 14100));

In this method, we keep adding new items to a list until no more are found.

Answer 4

Here is the proposed approach:

function cleanArray(array, element) {
    let prevSize = -1;
    let currentSize = array.length;
    let blacklist = [element];
    while (prevSize != currentSize) {
        prevSize = currentSize;
        array = array.filter((item) => {
            if ((blacklist.indexOf(item.parent) >= 0) || (blacklist.indexOf(item.element) >= 0)) blacklist.push(item.element);
            else return true;
        });
        currentSize = array.length;
    }
    return array;
}
  const data = [
    {
      element: 14098,
      parent: 14096,
    },
    {
      element: 14100,
      parent: 0,
    },
    {
      element: 14096,
      parent: 14100,
    },
    {
      element: 5,
      parent: 6
    }
  ];
  
  console.log(cleanArray(data, 14100));

In this method, we keep adding new items to a list until no more are found.

Answer 5

Answer №3

An example to demonstrate the concept:

const data = [
  { id: 14098, parent: 14096 },
  { id: 14099, parent: 14096 },
  { id: 14100, parent: 0 },
  { id: 14096, parent: 14100 },
  { id: 14200, parent: 0 },
  { id: 14210, parent: 14200 },
];

const delete_item_by_id = (array, id) => {
  const index = array.findIndex((item) => item.id === id);
  if(index > -1) array.splice(index, 1);
};

const delete_item_and_children = (array, id) => {
  let queue = [id];
  delete_item_by_id(array, id);
  
  while(queue.length > 0) {
    let current = queue.pop();
    queue.push(...array.filter((item) => item.parent === current).map((item) => item.id));
    delete_item_by_id(array, current);
  }
};

delete_item_and_children(data, 14100);

console.log(data);

If dealing with a large array, consider using a map for efficient child item retrieval, avoiding costly filter calls.

If possible, share your progress so far for better guidance from others.

Modified version utilizing a map approach (without altering original data):

const data = [
  { id: 14098, parent: 14096 },
  { id: 14099, parent: 14096 },
  { id: 14100, parent: 0 },
  { id: 14096, parent: 14100 },
  { id: 14200, parent: 0 },
  { id: 14210, parent: 14200 },
];

const get_child_map = (array) =>
   array.reduce(
    (map, { id, parent }) => {
      let arr = map.get(parent);
      if(!arr) map.set(parent, arr = []);
      arr.push(id);
      return map;
    },
    new Map()
  );

const filter_out_item_and_descendents = (array, delete_id) => {
  const child_map = get_child_map(array);
  
  let remove = new Set([delete_id]);
  let queue = [delete_id];
  
  while(queue.length > 0) {
    let current = queue.pop();
    queue.push(...(child_map.get(current) ?? []));
    remove.add(current);
  }
  
  return array.filter(({ id }) => !remove.has(id));
};

console.log(filter_out_item_and_descendents(data, 14100));

Answer 6

An example to demonstrate the concept:

const data = [
  { id: 14098, parent: 14096 },
  { id: 14099, parent: 14096 },
  { id: 14100, parent: 0 },
  { id: 14096, parent: 14100 },
  { id: 14200, parent: 0 },
  { id: 14210, parent: 14200 },
];

const delete_item_by_id = (array, id) => {
  const index = array.findIndex((item) => item.id === id);
  if(index > -1) array.splice(index, 1);
};

const delete_item_and_children = (array, id) => {
  let queue = [id];
  delete_item_by_id(array, id);
  
  while(queue.length > 0) {
    let current = queue.pop();
    queue.push(...array.filter((item) => item.parent === current).map((item) => item.id));
    delete_item_by_id(array, current);
  }
};

delete_item_and_children(data, 14100);

console.log(data);

If dealing with a large array, consider using a map for efficient child item retrieval, avoiding costly filter calls.

If possible, share your progress so far for better guidance from others.

Modified version utilizing a map approach (without altering original data):

const data = [
  { id: 14098, parent: 14096 },
  { id: 14099, parent: 14096 },
  { id: 14100, parent: 0 },
  { id: 14096, parent: 14100 },
  { id: 14200, parent: 0 },
  { id: 14210, parent: 14200 },
];

const get_child_map = (array) =>
   array.reduce(
    (map, { id, parent }) => {
      let arr = map.get(parent);
      if(!arr) map.set(parent, arr = []);
      arr.push(id);
      return map;
    },
    new Map()
  );

const filter_out_item_and_descendents = (array, delete_id) => {
  const child_map = get_child_map(array);
  
  let remove = new Set([delete_id]);
  let queue = [delete_id];
  
  while(queue.length > 0) {
    let current = queue.pop();
    queue.push(...(child_map.get(current) ?? []));
    remove.add(current);
  }
  
  return array.filter(({ id }) => !remove.has(id));
};

console.log(filter_out_item_and_descendents(data, 14100));

Answer 7

Answer №4

After reviewing the existing answers, I have come up with a revised approach to solving this problem that addresses the issues pointed out by Ben Stephens:

const getDescendantIds = (items, target) => {
  const elements = items.filter(({parent}) => parent == target);
  return [target].concat(elements.flatMap(el => getDescendantIds(items, el.id)));
}

const removeSubTree = (items, target, ids = getDescendantIds(items, target)) =>
  items.filter(({id}) => !ids.includes(id));

const array = [{id: 14098, parent: 14096}, {id: 14100, parent: 0}, {id: 14096, parent: 14100}];

console.log('removing 14096', removeSubTree(array, 14096));
console.log('removing 14098', removeSubTree(array, 14098));
console.log('removing 14100', removeSubTree(array, 14100));

.as-console-wrapper {max-height: 100% !important; top: 0}

This solution breaks down the problem into two steps. First, we recursively retrieve the ids of the nodes descending from the one with our target id. Then, we filter the list to create a new list without those ids.

It's important to note that this method returns a copy of the original list without the specified values. The original list remains untouched as we do not mutate it. We strive for civilized coding practices!

Revised Approach

The initial code had errors, which were corrected based on feedback from Ben Stephens. The use of filter instead of find was crucial for proper execution.

const getDescendantIds = (items, target) => {
  const element = items.find(({parent}) => parent == target);
  return [target].concat(element ? getDescendantIds(items, element.id) : []);
}

const removeSubTree = (items, target, ids = getDescendantIds(items, target)) =>
  items.filter(({id}) => !ids.includes(id));

const array = [{id: 14098, parent: 14096}, {id: 14100, parent: 0}, {id: 14096, parent: 14100}];

console.log('removing 14096', removeSubTree(array, 14096));
console.log('removing 14098', removeSubTree(array, 14098));
console.log('removing 14100', removeSubTree(array, 14100));

.as-console-wrapper {max-height: 100% !important; top: 0}

Answer 8

After reviewing the existing answers, I have come up with a revised approach to solving this problem that addresses the issues pointed out by Ben Stephens:

const getDescendantIds = (items, target) => {
  const elements = items.filter(({parent}) => parent == target);
  return [target].concat(elements.flatMap(el => getDescendantIds(items, el.id)));
}

const removeSubTree = (items, target, ids = getDescendantIds(items, target)) =>
  items.filter(({id}) => !ids.includes(id));

const array = [{id: 14098, parent: 14096}, {id: 14100, parent: 0}, {id: 14096, parent: 14100}];

console.log('removing 14096', removeSubTree(array, 14096));
console.log('removing 14098', removeSubTree(array, 14098));
console.log('removing 14100', removeSubTree(array, 14100));

.as-console-wrapper {max-height: 100% !important; top: 0}

This solution breaks down the problem into two steps. First, we recursively retrieve the ids of the nodes descending from the one with our target id. Then, we filter the list to create a new list without those ids.

It's important to note that this method returns a copy of the original list without the specified values. The original list remains untouched as we do not mutate it. We strive for civilized coding practices!

Revised Approach

The initial code had errors, which were corrected based on feedback from Ben Stephens. The use of filter instead of find was crucial for proper execution.

const getDescendantIds = (items, target) => {
  const element = items.find(({parent}) => parent == target);
  return [target].concat(element ? getDescendantIds(items, element.id) : []);
}

const removeSubTree = (items, target, ids = getDescendantIds(items, target)) =>
  items.filter(({id}) => !ids.includes(id));

const array = [{id: 14098, parent: 14096}, {id: 14100, parent: 0}, {id: 14096, parent: 14100}];

console.log('removing 14096', removeSubTree(array, 14096));
console.log('removing 14098', removeSubTree(array, 14098));
console.log('removing 14100', removeSubTree(array, 14100));

.as-console-wrapper {max-height: 100% !important; top: 0}

Delete items from the array based on the relationship between them

Answer №1

Answer №2

Answer №3

Answer №4

Revised Approach

Similar questions

React application not displaying element properly?

It appears that combining Object.assign with Function.prototype may not function as expected

Retrieving the selected value and inserting the ID instead of the string into the database in PHP using the MVC design pattern

Managing an iframes website using buttons and links: Tips and tricks

Unable to extract all advertisements from Facebook Marketplace

The React function was misusing the useEffect hook, causing it to be

Is there a way to adjust the time font size according to the dimensions of the time picker?

Having issues with the basic KnockoutJS binding not functioning as expected

Implementing jQuery's live() method to handle the image onload event: a guide

Securing ASP.NET Web API with Cross-Domain AJAX Requests: A Comprehensive Guide

The search functionality in an Html table is currently malfunctioning

checkbox revision

The efficiency of the Angular app in production is hindered by a file that takes a whopping 5 seconds to load

Is it possible to display events on fullcalendar.io using PHP and MySQL?

Unable to retrieve unique array names from JSON document

Organize the jumbled array

AngularJS xeditable: sending updated data to the server

Is it necessary to use callbacks when using mongoose's findbyid with express to retrieve an object from the database? Are callbacks still important in modern JavaScript frameworks?

How can I activate a jQuery function only when it is within the viewport?

Creating dynamic elements in JavaScript utilizing Bootstrap cards