Why splice method does not work and delete item on array in TypeScript

Question

I have an array type Person that has some data. Example:

const people = [{name: "John", age: "18"},{name: "Mike", content: "20"},{label: "Brand", content: "18"},{label: "Alice", content: "50"},{label: "Zina", content: "10"}];

I have another array type of string[] that has the following data: names=["John", "Zina"];

I try to delete the names that are on the second array from the first array like this:

  for (let i = 0; i < people.length; i++) {
    for (let j = 0; j < names.length; j++) {
      if (names[j] === people[i].name) {
        people.splice(i);
      }
    }
  }

Why it does not work?

Why the sudden switch in the properties? Some have `name` while other have `label`.. — Murat Karagöz, Feb 24 '20 at 10:04
You are missing the second parameter to `splice`. It will delete all the items starting from `i`. Even if you change it to `people.splice(i, 1)`, it will break the loop because: [Looping through array and removing items, without breaking for loop](https://stackoverflow.com/questions/9882284). You need to loop in the reverse direction to make it work — adiga, Feb 24 '20 at 10:05

score 2 · Answer 1 · edited Feb 24 '20 at 10:20

If you like to keep the object reference from people, you could iterate people from the end, because Array#splice with items to delete changes the indices of the following items.

var people = [{ name: "Mike", content: "20" }, { label: "Brand", content: "18" }, { label: "Alice", content: "50" }, { label: "Zina", content: "10" }],
    names = ["John", "Zina"],
    i = people.length;

while (i--) {
    if (names.includes(people[i].name) || names.includes(people[i].label)) {
        people.splice(i, 1);
    }
}

console.log(people);

.as-console-wrapper { max-height: 100% !important; top: 0; }

property includes does not exist on type string [] – Kathrine Hanson Feb 24 '20 at 10:13 — Kathrine Hanson, Feb 24 '20 at 10:13

score 1 · Answer 2 · answered Feb 24 '20 at 10:04

1

The splice method is modifying the array inplace. I suggest you to use filter method.

const people = [{name: "John", age: "18"},{name: "Mike", content: "20"},{name: "Brand", content: "18"},{name: "Alice", content: "50"},{name: "Zina", content: "10"}], names=["John", "Zina"];


console.log(people.filter(({name}) => !names.includes(name)));

answered Feb 24 '20 at 10:04

Mihai Alexandru-Ionut

47,092
13
101
128

This does not work while names is a type of string array – Kathrine Hanson Feb 24 '20 at 10:08
@KathrineHanson, then use indexOf instead includes – Mihai Alexandru-Ionut Feb 24 '20 at 10:16

score 0 · Answer 3 · answered Feb 24 '20 at 10:10

Please refer below Code.

const people = [{name: "John", age: "18"},{name: "Mike", content: "20"},{label: "Brand", content: "18"},{label: "Alice", content: "50"},{label: "Zina", content: "10"}];
const names = ["Mike","Shiv"];

for (let i = 0; i < people.length; i++) {
debugger
    for (let j = 0; j < names.length; j++) {
      if (names[j] === people[i].name) {
        people.splice(i,1);
      }
    }
  }
 console.log(people)

score 0 · Accepted Answer · answered Feb 24 '20 at 10:28

Splice is modifying the original array. i.e. on each iteration if condition return true, people array at that index gets replaced with undefined and hence gets error.

you can use slice method to get data that you want to delete.

 for (let i = 0; i < people.length; i++) {
    for (let j = 0; j < names.length; j++) {
      if (names[j] === people[i].name) {
     console.log("matched",names[j],people[i].name, people.slice(i,i+1),);
      }
    }
  }

or you can simply filter data using Filter method.

Why splice method does not work and delete item on array in TypeScript

4 Answers4