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 — Heretic Monkey
– Heretic Monkey, Commented Sep 4, 2019 at 13:30
The accepted answer on the duplicate details why delete is not working, and why splice will. — Heretic Monkey
– Heretic Monkey, Commented Sep 4, 2019 at 13:31
@HereticMonkey I tried splice. My code has it commented out as it didn't work. — Datacrawler
– Datacrawler, Commented Sep 4, 2019 at 13:36
Splice() is working perfect , have a look at my answer . @ApoloRadomer — Pushprajsinh Chudasama
– Pushprajsinh Chudasama, Commented Sep 4, 2019 at 13:40

Karan · Accepted Answer · 2019-09-10 10:58:03Z

3

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 .

edited Sep 10, 2019 at 10:58

Karan

12.7k3 gold badges31 silver badges45 bronze badges

answered Sep 4, 2019 at 13:35

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heretic Monkey Over a year ago

Answers which explain their code are upvoted more often, and downvoted less often than those which simply give the answer in a code block.

SeanDemps · Accepted Answer · 2019-09-04 13:35:36Z

1

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.

answered Sep 4, 2019 at 13:35

SeanDemps

2101 silver badge7 bronze badges

Comments

Daniyal Lukmanov · Accepted Answer · 2019-09-04 13:36:22Z

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 4, 2019 at 13:36

Daniyal Lukmanov

1,22912 silver badges22 bronze badges

3 Comments

Pushprajsinh Chudasama Over a year ago

.map() function doest return the object . You should use the .filter() instead

Daniyal Lukmanov Over a year ago

And who told you that he needs an object?

Pushprajsinh Chudasama Over a year ago

Here you wrote return therefore i am just correcting you @Daniyal

Amardeep Bhowmick · Accepted Answer · 2019-09-04 13:48:19Z

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

Collectives™ on Stack Overflow

Javascript Avoid getting null after deleting objects from array

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related