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> 

Answer 1

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 .

Answer 2

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)); 

Answer 3

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.

Answer 4

You can use map and splice inside the callback function:

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