Remove a single item from a dynamically generated ObjectArray

Question

Remove a single item from a dynamically generated ObjectArray

I am working with an object array list that is formatted like this:

var myFormData = [
{
    id: 1,
    name: "first name",
    type: "test",
    root: "/myfolder"
},
{
    id: 3,
    name: "your name",
    type: "test 2",
    root: "/myfolder2"
}, {
    id: 4,
    name: "your test",
    type: "test 3",
    root: "/myfold",
    child: [
        {
            id: 5,
            name: "name",
            type: "testf",
            root: "/myfoldertr"
        },
        {
            id: 6,
            name: "first-name",
            type: "test",
            root: "/myfolderoot",
            child: [
                {
                    id: 8,
                    name: "sub first name",
                    type: "test5",
                    root: "/myfoldertest"
                }, {
                    id: 9,
                    name: "first name root",
                    type: "test9",
                    root: "/myfolder",
                    child: [
                        {
                            id: 10,
                            name: "normal first name",
                            type: "test5",
                            root: "/myfoldertest"
                        }, {
                            id: 11,
                            name: "last first name",
                            type: "test5",
                            root: "/myfoldertest"
                        }
                    ]
                },
                {
                    id: 12,
                    name: "name Name",
                    type: "testf",
                    root: "/myfoldertr"
                }
            ]
        },
        {
            id: 7,
            name: "first name",
            type: "test",
            root: "/myfolder"
        }
    ]
}]

The structure is generated from a database, so I cannot guarantee the data is always accurate. Sometimes objects have children, sometimes not. My goal is to remove an object with a certain id (obtained programmatically), such as deleting id=11.

javascript angularjs arrays multidimensional-array

Answer 1

Answer №1

One important aspect to note is the necessity to delve deep into the target array. The provided code snippet exemplifies the use of a recursive call to navigate deeply into the nested array.

function deleteObj(target, id) {
  if (!Array.isArray(target)) return;
  target.forEach(function(item, index) {
    if (item.child) {
      target = deleteObj(item.child, id);
    }
    if (item.id === 11) {
      target.splice(index, 1);
    }
  });
}

var myFormData = [{
    id: 1,
    name: "first name",
    type: "test",
    root: "/myfolder"
  },
  {
    id: 3,
    name: "your name",
    type: "test 2",
    root: "/myfolder2"
  }, {
    id: 4,
    name: "your test",
    type: "test 3",
    root: "/myfold",
    child: [{
        id: 5,
        name: "name",
        type: "testf",
        root: "/myfoldertr"
      },
      {
        id: 6,
        name: "first-name",
        type: "test",
        root: "/myfolderoot",
        child: [{
            id: 8,
            name: "sub first name",
            type: "test5",
            root: "/myfoldertest"
          }, {
            id: 9,
            name: "first name root",
            type: "test9",
            root: "/myfolder",
            child: [{
              id: 10,
              name: "normal first name",
              type: "test5",
              root: "/myfoldertest"
            }, {
              id: 11,
              name: "last first name",
              type: "test5",
              root: "/myfoldertest"
            }]
          },
          {
            id: 12,
            name: "name Name",
            type: "testf",
            root: "/myfoldertr"
          }
        ]
      },
      {
        id: 7,
        name: "first name",
        type: "test",
        root: "/myfolder"
      }
    ]
  }
];

function deleteObj(target, id) {
  if (!Array.isArray(target)) return;
  target.forEach(function(item, index) {
    if (item.child) {
      target = deleteObj(item.child, id);
    }
    if (item.id === 11) {
      target.splice(index, 1);
    }
  });
}

deleteObj(myFormData, 11);
console.log(myFormData);

Answer 2

One important aspect to note is the necessity to delve deep into the target array. The provided code snippet exemplifies the use of a recursive call to navigate deeply into the nested array.

function deleteObj(target, id) {
  if (!Array.isArray(target)) return;
  target.forEach(function(item, index) {
    if (item.child) {
      target = deleteObj(item.child, id);
    }
    if (item.id === 11) {
      target.splice(index, 1);
    }
  });
}

var myFormData = [{
    id: 1,
    name: "first name",
    type: "test",
    root: "/myfolder"
  },
  {
    id: 3,
    name: "your name",
    type: "test 2",
    root: "/myfolder2"
  }, {
    id: 4,
    name: "your test",
    type: "test 3",
    root: "/myfold",
    child: [{
        id: 5,
        name: "name",
        type: "testf",
        root: "/myfoldertr"
      },
      {
        id: 6,
        name: "first-name",
        type: "test",
        root: "/myfolderoot",
        child: [{
            id: 8,
            name: "sub first name",
            type: "test5",
            root: "/myfoldertest"
          }, {
            id: 9,
            name: "first name root",
            type: "test9",
            root: "/myfolder",
            child: [{
              id: 10,
              name: "normal first name",
              type: "test5",
              root: "/myfoldertest"
            }, {
              id: 11,
              name: "last first name",
              type: "test5",
              root: "/myfoldertest"
            }]
          },
          {
            id: 12,
            name: "name Name",
            type: "testf",
            root: "/myfoldertr"
          }
        ]
      },
      {
        id: 7,
        name: "first name",
        type: "test",
        root: "/myfolder"
      }
    ]
  }
];

function deleteObj(target, id) {
  if (!Array.isArray(target)) return;
  target.forEach(function(item, index) {
    if (item.child) {
      target = deleteObj(item.child, id);
    }
    if (item.id === 11) {
      target.splice(index, 1);
    }
  });
}

deleteObj(myFormData, 11);
console.log(myFormData);

Remove a single item from a dynamically generated ObjectArray

Answer №1

Similar questions

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Combining strings within a string after a specific word with nested Concatenation

What causes the auto focus directive to fail to function properly?

Having trouble retrieving data from an array within a JSON object

Daily loop countdown timer

Get the hash value after a specific character using Javascript

Dynamically obtaining the content of a tag using jQuery

Utilizing jQuery Ajax to submit multiple forms using a single selector in one go

Issues with Pdf.js functionality on Internet Explorer

Attempting to store a specific h1 text.event as a variable, allowing it to be saved upon input of the initial letter

Instantiate a child class within an abstract class by utilizing the keyword "this"

Ways to stop Google Places API from generating outcomes from a particular country

Getting the specific key of the selected item from material-ui autocomplete when onSelect is triggered, rather than simply retrieving the value

Methods for adding a line to an array

Encountering a maximum call stack size error is a common issue when implementing d3.layout.partition in Angular

Should one consider using requirejs to enhance individual pages instead of relying solely on vanilla JavaScript applications?

Extract information from a lengthy text (vcard)

Implementing a dynamic text field feature with JavaScript and PHP

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

What is the best way to store and retrieve a three-dimensional dynamic character array in a file?