Search multidimentional array for an object with a matching value

Question

How would I go about searching a multidimensional array for a value and then delete the object where the value was found, the code below will not always be the same so i need a way to search all of the arrays to find the object with a specific value

For example, if I wanted to delete an object with the id of 8, how would I search all arrays and objects for the id and then delete the object, here is an example of the data

{
  MenuLocation: 'Jersey',
  MenuItems: [
    {
      id: '1',
      parentId: '1',
      position: 2,
      name: 'test1',
      link: 'http://google.com',
      submenu: []
    },
    {
      id: '2',
      parentId: '2',
      position: 1,
      name: 'test2',
      link: '#',
      submenu: [
        {
          id: '3',
          parentId: '2',
          position: 1,
          name: 'testsub1',
          link: 'http://google.com',
          submenu: []
        },
        {
          id: '4',
          parentId: '2',
          position: 2,
          name: 'testsub2',
          link: 'http://google.com',
          submenu: [
            {
              id: '5',
              parentId: '4',
              position: 1,
              name: 'testsub4.1',
              link: 'http://google.com',
              submenu: []
            },
            {
              id: '6',
              parentId: '4',
              position: 2,
              name: 'testsub4.2',
              link: 'http://google.com',
              submenu: []
            },
            {
              id: '7',
              parentId: '4',
              position: 3,
              name: 'testsub4.3',
              link: 'http://google.com',
              submenu: [
                {
                  id: '8',
                  parentId: '7',
                  position: 3,
                  name: 'testsub4.1',
                  link: 'http://google.com',
                  submenu: []
                },
                {
                  id: '9',
                  parentId: '7',
                  position: 2,
                  name: 'testsub4.2',
                  link: 'http://google.com',
                  submenu: []
                },
                {
                  id: '10',
                  parentId: '7',
                  position: 1,
                  name: 'testsub4.3',
                  link: 'http://google.com',
                  submenu: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

This is what I've put together so far, it's quite messy but it works but I assume this is not the best way to do it

 delClick(id) {


for (var key in this.menu.MenuItems) {
  var obj = this.menu.MenuItems[key];
  if (obj.id == id) {
    console.log('match');
  } else {
    if (obj.submenu.length > 0) {
      for (var key in obj.submenu) {
        var nextobj = obj.submenu[key];
        if (nextobj.id == id) {
          console.log('match');
          console.log(nextobj);
        } else {
          for (var key in nextobj.submenu) {
            var objn = nextobj.submenu[key]
            if (objn.id == id) {
              console.log('match');
              console.log(objn);
            }
          }
        }
      }

    }

  }

}

} }

I would have to keep adding for loops until it checks everything but I don't know how many arrays and objects there will be, what is the best way to overcome this?

you need to show us what you've tried, we're here to correct you, not doing the job for you — jonatjano
– jonatjano, Commented Jul 30, 2020 at 14:06
@jonatjano and sorry i'm quite new to javascript so I was looking for some guidance I guess, not expecting anyone to do it all for me — Sandro
– Sandro, Commented Jul 30, 2020 at 14:13
You need to think about all possible cases. like if the object is an array or just an object . for eg: a={ b: [ c:{d}, e:[], f:{} , f:{.... }} and so on. for array use object.keys() function or foreach . similarly iterate objects etc. — vibhor vaish
– vibhor vaish, Commented Jul 30, 2020 at 14:19

Moritz Roessler · Accepted Answer · 2020-07-30 15:05:19Z

This is a little bit more complex because once you delete items you need to update their position.

A simple but naive way would be to compute a flat list of items, turn that into a map. Get the parent item by its parentId and delete the sub item based on its position, then update the position in the submenu.

function toValues (data) {
    const obj = data.MenuItems || data.submenu;
    if (obj && typeof obj === 'object') {
        const values = Object.values(obj);
        return values.concat(values.map(toValues)).flat();
    }
    return obj;
}
function toLkp (data) {
    return toValues(data).reduce((acc, cur) => {
        acc[cur.id] = cur;
        return acc;
    }, {});
}
function del (id, data) {
    const lkp = toLkp(data);
    const obj = lkp[id];
    const par = lkp[obj.parentId];
    const pos = obj.position;

    par.submenu.splice(obj.position - 1, 1);
    for (const itm of par.submenu) {
        if (itm.position > pos) itm.position -= 1;
    }
    return data;
}

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

del(3, data);

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

<script>
var data  = {
    MenuLocation: 'Jersey',
    MenuItems: [{
            id: '1',
            parentId: '1',
            position: 2,
            name: 'test1',
            link: 'http://google.com',
            submenu: []
        },
        {
            id: '2',
            parentId: '2',
            position: 1,
            name: 'test2',
            link: '#',
            submenu: [{
                    id: '3',
                    parentId: '2',
                    position: 1,
                    name: 'testsub1',
                    link: 'http://google.com',
                    submenu: []
                },
                {
                    id: '4',
                    parentId: '2',
                    position: 2,
                    name: 'testsub2',
                    link: 'http://google.com',
                    submenu: [{
                            id: '5',
                            parentId: '4',
                            position: 1,
                            name: 'testsub4.1',
                            link: 'http://google.com',
                            submenu: []
                        },
                        {
                            id: '6',
                            parentId: '4',
                            position: 2,
                            name: 'testsub4.2',
                            link: 'http://google.com',
                            submenu: []
                        },
                        {
                            id: '7',
                            parentId: '4',
                            position: 3,
                            name: 'testsub4.3',
                            link: 'http://google.com',
                            submenu: [{
                                    id: '8',
                                    parentId: '7',
                                    position: 3,
                                    name: 'testsub4.1',
                                    link: 'http://google.com',
                                    submenu: []
                                },
                                {
                                    id: '9',
                                    parentId: '7',
                                    position: 2,
                                    name: 'testsub4.2',
                                    link: 'http://google.com',
                                    submenu: []
                                },
                                {
                                    id: '10',
                                    parentId: '7',
                                    position: 1,
                                    name: 'testsub4.3',
                                    link: 'http://google.com',
                                    submenu: []
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}
</script>

As you can see in the console.log, the item with the id 3 is gone and the item with the id 4 has a position of 1.

Collectives™ on Stack Overflow

Search multidimentional array for an object with a matching value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related