CODEWITHSUNDEEP
javascript
Daniel
Daniel

Reputation: 4342

remove items from object if value is empty

So I'm taking a form and using serializeArray() to get all the forms data. There are 10 text inputs. What I am trying to do is skip the forms that return a empty result or forms that have "" as value. Here is what I came up with and it returns the index of the forms with "" or empty results correctly. 

$("#" + forms).on("submit", function(event) {
    var allData = $(this).serializeArray();

    event.preventDefault();
    for (var key in allData) {
        if (allData[key].value === "") {
                    allData.splice(key, 1);
        }
    }
});

But when I add allData.splice(key, 1); it doesn't remove all the values with "" as a result. I basically want to remove any input that isn't going to have a value.

Also the structure of the objec is as follows.

[0]
  name: "emailone",
  value "[email protected]"
[1]
  name: "passwordone",
  value: "123asd"
[2]
  name: "emailtwo",
  value "[email protected]"
[3]
  name: "passwordtwo",
  value: "asd123"
[4]
  name: "emailthree",
  value ""
[5]
  name: "passwordthree",
  value: ""

Upvotes: 0

Views: 126

Answers (4)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You simply use delete to achieve your need,

for (var key in allData) {
        if (allData[key].value === "") {
             delete allData[key]; 
        }
    }

additionally you don't need explicitly get the value by this toallData[key].value, toallData[key] will simply return the value associated with the particular key.

DEMO

Updated:

    for (var i=0; i < allData.length ; I++) {
        if (allData[i].value === "") {
               allData.splice(i, 1);
               i--;
        }
    }

You should decrement the value of the index by one, every time you are removing an object from the array.

Upvotes: 0

Bubbles
Bubbles

Reputation: 3815

By splicing an array as you iterate over it, you can accidentally skip values - in this case, by removing a value at index four, you decrease the index of the following value by one. The loop than increments to five, and the value that started at the fifth index is skipped.

A few other answers have posted reasonable ways to work around this. If you're working with a newer version of JavaScript or with a library like jQuery or underscore, you could alternatively do this:

allData = allData.filter(function(e) {
  return e.value !== "";
});

With jQuery, this can be written as 

allData = $.grep(allData, function(e) {
  return e.value !== "";
});

and in underscore:

allData = _.filter(allData, function(e) {
  return e.value !== "";
});

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

That happens because you are altering the array while traversing it...

When you key is 4 and the value is '' you remove that element (succesfully) but when you splice the array it becomes a smaller one.. so the element at position 5 is now at 4. Your key variable is increased to 5 but now there is no element 5 in your array..

You need to traverse it backwards 

$("#" + forms).on("submit", function(event) {
    var allData = $(this).serializeArray();

    event.preventDefault();
    for (var key = allData.length-1; key >= 0 ; key--) {
        if (allData[key].value === "") {
                    allData.splice(key, 1);
        }
    }
});

Upvotes: 2

carter
carter

Reputation: 5432

var arrLength = allData.length, i, cleanArray = [], serializedArr;

for(i = 0; i < arrLength; i += 1{
  if(allData[i] != ""){
    cleanArray.push(allData[i]);
  }
}

serializedArr = cleanArray.serializeArray();

Upvotes: 0

Related Questions