how to remove an item inside an array, nested inside another array

October 12, 2023

const arrTest = [
    {
        name: 'Shopping List',
        todos: [
            {
                text: 'bananas',
                completed: false
            },
            {
                text: '1 lbs ground turkey',
                completed: true
            },
            {
                text: 'milk',
                completed: false
            }
        ]
    },
    {
        name: 'College List',
        todos: [
            {
                text: 'University of Utah',
                completed: false
            },
            {
                text: 'Utah Valley University',
                completed: true
            },
            {
                text: 'Utah Tech University',
                completed: false
            }
        ]
    },
    {
        name: 'Chores',
        todos: [
            {
                text: 'wash dishes',
                completed: false
            },
            {
                text: 'vacuum downstairs',
                completed:  true
            },
            {
                text: "clean bathroom",
                completed: true
            }
        ]
    }
];

this array is nested with object/arrays and it’s what i’m using to create a list.
I’m trying to create a delete button that removes one of the todos: and re-render the list. anything helps

I’ve used splice() but can’t seem to get past the first array, I’ve tried delete() but that leaves an empty pocket in the array.

what would help me out in this situation? would using delete() then creating a new function be the best way? anything helps, thank you.

>Solution :

You simply need to access which array you can to modify. arrTest[1] will give you the 2nd object in the main array, and you can then call splice on the todos array inside of that: arrTest[1].todos.splice(1,1);

const arrTest = [
    {
        name: 'Shopping List',
        todos: [
            {
                text: 'bananas',
                completed: false
            },
            {
                text: '1 lbs ground turkey',
                completed: true
            },
            {
                text: 'milk',
                completed: false
            }
        ]
    },
    {
        name: 'College List',
        todos: [
            {
                text: 'University of Utah',
                completed: false
            },
            {
                text: 'Utah Valley University',
                completed: true
            },
            {
                text: 'Utah Tech University',
                completed: false
            }
        ]
    },
    {
        name: 'Chores',
        todos: [
            {
                text: 'wash dishes',
                completed: false
            },
            {
                text: 'vacuum downstairs',
                completed:  true
            },
            {
                text: "clean bathroom",
                completed: true
            }
        ]
    }
];

console.log('before: ', arrTest[1].todos)
arrTest[1].todos.splice(1,1); //remove 1 item
console.log('after: ', arrTest[1].todos)