Question 263582 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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.

Tags:

2

Answers


  1. 0

    You simply need to access which array you want 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)
    Login or Signup to reply.
  2. 0

    This function should sole your problem

    const removeItem = (list, itemIndex, todoIndex) => {
  list.at(itemIndex)?.todos?.splice(todoIndex, 1);
  return list;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search