How to remove element from nested array in JavaScript?

Question

Say I have a nested array like below.Now i want to remove elements but not children.i want to make it's children value to parent array/children value.

const steps =  [
       {
         step_id: 100,
         type: 'TEXT',
         title: null,
         item_id: 1,
         children: [
           {
             step_id: 102,
             type: 'TEXT',
             title: null,
             item_id: 1,
             children: [
               {
                 step_id: 104,
                 type: 'TEXT',
                 title: null,
                 item_id: 1,
                 children: [

                 ]
               }
             ]
           }
         ]
       }
     ];

For Example I want to remove when step_id=102 and its other elements and make it's children value to it's parent children value.I want something like this result.

result=  steps: [
 {
   step_id: 100,
   type: 'TEXT',
   title: null,
   item_id: 1,
   children: [
     {
       step_id: 104,
       type: 'TEXT',
       title: null,
       item_id: 1,
       children: [

       ]
     }
   ]
 }
]

I tried below code but its not returning right result. Please Help me.

Thank you.

 const steps = [ { step_id: 100, type: 'TEXT', title: null, item_id: 1, children: [ { step_id: 102, type: 'TEXT', title: null, item_id: 1, children: [ { step_id: 104, type: 'TEXT', title: null, item_id: 1, children: [ ] } ] } ] } ]; const removeItem ={step_id: 102, type: "TEXT", title: null, item_id: 1, children: Array(0)}; const removeElement = (steps, removeItem) => { steps.forEach((step) => { if (step.step_id == removeItem.step_id) { steps = step.children; } else { removeElement(step.children, removeItem); } }); //console.log(steps); return steps }; console.log(removeElement(steps, removeItem))

Answer 1

You're just reassigning the steps parameter variable, so the original object isn't mutated.
Use splice to replace the found node with its children inserted.

Personally I would have preferred flatMap and a little bit of object cloning. But this is fine if you're okay with the mutation of the original object.

 const steps = [{ step_id: 100, type: 'TEXT', title: null, item_id: 1, children: [{ step_id: 102, type: 'TEXT', title: null, item_id: 1, children: [{ step_id: 104, type: 'TEXT', title: null, item_id: 1, children: [ ] }] }] }]; const removeItem = { step_id: 102, type: "TEXT", title: null, item_id: 1, children: Array(0) }; const removeElement = (steps, removeItem) => { steps.forEach((step, i) => { if (step.step_id == removeItem.step_id) { steps.splice(i,1,...step.children); } else { removeElement(step.children, removeItem); } }); //console.log(steps); return steps }; console.log(removeElement(steps, removeItem))

Answer 2

if the step_id is unique, you can try this

const steps = [{
  step_id: 100,
  type: 'TEXT',
  title: null,
  item_id: 1,
  children: [{
    step_id: 102,
    type: 'TEXT',
    title: null,
    item_id: 1,
    children: [{
      step_id: 104,
      type: 'TEXT',
      title: null,
      item_id: 1,
      children: [

      ]
    }]
  }]
}];

const removeItem = {
  step_id: 102,
  type: "TEXT",
  title: null,
  item_id: 1,
  children: Array(0)
};

const removeElement = (steps, removeItemId) => {
  if (!steps || steps.length === 0) {
    return false;
  }

  var id = null;
  steps.some((item, i) => {
    id = (item.step_id === removeItemId) ? i : null;
    return i !== null;
  });

  if (id !== null) {
    steps.splice(id, 1);
    return true;
  }

  return steps.some(item => removeElement(item.children, removeItemId));
};

console.log(removeElement(steps, removeItem.step_id)); // should be true

Answer 3

At this link you can find different solutions.

https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/flat