Javascript Avoid getting null after deleting objects from array

Question

I have an array with multiple nested arrays. Each nested array has three objects. I am trying to delete the second one but at the moment, I am getting a null value in its place. All I want is the final output (after) to have no null values. Splice is returning an error that the splice function doesn't exist.

var json_data=[[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 3",formattedValue:"Unwanted part 3"},{value:2831.8,formattedValue:"283,180.00 %"}],[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 2",formattedValue:"Unwanted part 2"},{value:349.1111111111111,formattedValue:"34,911.11 %"}],[{value:"value2",formattedValue:"value2"},{value:"Unwanted part 1",formattedValue:"Unwanted part 1"},{value:3.3703703703703702,formattedValue:"337.04 %"}]];

document.getElementById("before").innerHTML= JSON.stringify(json_data); 

for(i=0;i<json_data.length;i++){
  let items = json_data[i];
  const subItemToBeRemovedId = 1;
  items.forEach((item) => items.forEach((subItem, index) => {
      //console.log(JSON.stringify(items[subItemToBeRemovedId]));
      delete items[subItemToBeRemovedId];
      //return item.subItemToBeRemovedId.splice(index, 1);
  }));
}

document.getElementById("after").innerHTML= JSON.stringify(json_data);

<h1>before</h1>
<div id="before"></div>
<h1>after </h1>
<div id="after"></div>

Possible duplicate of [Deleting array elements in JavaScript - delete vs splice](https://stackoverflow.com/questions/500606/deleting-array-elements-in-javascript-delete-vs-splice) — Heretic Monkey, Sep 04 '19 at 13:30
The accepted answer on the duplicate details why `delete` is not working, and why `splice` will. — Heretic Monkey, Sep 04 '19 at 13:31
@HereticMonkey I tried splice. My code has it commented out as it didn't work. — Datacrawler, Sep 04 '19 at 13:36
`Splice() ` is working perfect , have a look at my answer . @ApoloRadomer — Pushprajsinh Chudasama, Sep 04 '19 at 13:40
`splice` works fine if you use it on an array. `item.subItemToBeRemovedId` is undefined. If `items` is the array you wish to remove the item from, use `items.splice`... — Heretic Monkey, Sep 04 '19 at 13:42

score 3 · Accepted Answer · edited Sep 10 '19 at 10:58

You can use the following code,
Here you can simply use the .splice() which will remove element from your array. Don't need to use multiple forEach().

var json_data = [
  [{
    value: "value1",
    formattedValue: "value1"
  }, {
    value: "Unwanted part 3",
    formattedValue: "Unwanted part 3"
  }, {
    value: 2831.8,
    formattedValue: "283,180.00 %"
  }],
  [{
    value: "value1",
    formattedValue: "value1"
  }, {
    value: "Unwanted part 2",
    formattedValue: "Unwanted part 2"
  }, {
    value: 349.1111111111111,
    formattedValue: "34,911.11 %"
  }],
  [{
    value: "value2",
    formattedValue: "value2"
  }, {
    value: "Unwanted part 1",
    formattedValue: "Unwanted part 1"
  }, {
    value: 3.3703703703703702,
    formattedValue: "337.04 %"
  }]
];

document.getElementById("before").innerHTML = JSON.stringify(json_data);

for (i = 0; i < json_data.length; i++) {
  let items = json_data[i];
  console.log("ITEMS  ===>", items);
  items.splice(1, 1);
}

document.getElementById("after").innerHTML = JSON.stringify(json_data);

<h1>before</h1>
<div id="before"></div>
<h1>after </h1>
<div id="after"></div>

This is the solution you are looking for .

Answers which explain their code are upvoted more often, and downvoted less often than those which simply give the answer in a code block. — Heretic Monkey, Sep 04 '19 at 13:39

Fullstack Guy · Answer 2 · 2019-09-04T13:48:19.593

You can use Array.prototype.map to get a hold of the inner array and then filter it based on the position:

const json_data=[[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 3",formattedValue:"Unwanted part 3"},{value:2831.8,formattedValue:"283,180.00 %"}],[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 2",formattedValue:"Unwanted part 2"},{value:349.1111111111111,formattedValue:"34,911.11 %"}],[{value:"value2",formattedValue:"value2"},{value:"Unwanted part 1",formattedValue:"Unwanted part 1"},{value:3.3703703703703702,formattedValue:"337.04 %"}]];

document.getElementById("before").innerHTML= JSON.stringify(json_data); 

const after_json_data = json_data.map(items => 
                            items.filter((item, idx) => idx !== 1))


document.getElementById("after").innerHTML= JSON.stringify(after_json_data);

<h1>before</h1>
<div id="before"></div>
<h1>after </h1>
<div id="after"></div>

Deleting array elements using the delete operator does not alter the length of the array, instead it leaves undefined in place of the deleted element.

For an experiment lets delete the second element from the below array:

const arr = ["foo", "baz", "bar"];
delete arr[1];
console.log(arr);

The index 1 becomes undefined. But you see null appearing in your output instead of undefined this is because when you convert the array object to JSON, the undefined gets converted to null as there is no undefined in the JSON spec:

const arr = ["foo", "baz", "bar"];
delete arr[1];
console.log(arr);
// undefined is null in the JSON string
console.log(JSON.stringify(arr));

score 1 · Answer 3 · answered Sep 04 '19 at 13:35

delete won't do what you want it to in this case, it will always replace an array entry with an empty position as I believe it handles the Array like an object (so your length property won't update either).

You nearly have it in your commented out section I believe. Instead of:

 return item.subItemToBeRemovedId.splice(index, 1);

use:

items.splice(subItemToBeRemovedId, 1);
return items;

Splice will mutate your Array, which you can then return.

score 1 · Answer 4 · answered Sep 04 '19 at 13:36

1

You can use map and splice inside the callback function:

json_data = json_data.map(subArr => {
    subArr.splice(1,1);
    return subArr
})

answered Sep 04 '19 at 13:36

Daniyal Lukmanov

1,149
10
21

`.map()` function doest return the object . You should use the `.filter()` instead – Pushprajsinh Chudasama Sep 04 '19 at 13:37
And who told you that he needs an object? – Daniyal Lukmanov Sep 04 '19 at 13:38
Here you wrote `return` therefore i am just correcting you @Daniyal – Pushprajsinh Chudasama Sep 04 '19 at 13:39

Javascript Avoid getting null after deleting objects from array

4 Answers4