C. Kelly C. Kelly - 4 months ago 13
Javascript Question

Last Remaining Blank in splicing an array

Problem
I have been working on this code for a little while now and I'm not sure how to solve. I am taking in 3 values from inputs and trying to clean out all the blank spaces "" in the array however when I run the code it returns this:

["mm", "111", "100"]
["inches", "222", "95"]
["phi", "33", "55"]
[""] // <---- **How to rid this**


JavaScript

$(document).ready(function() {
$('#sub').click(function() {
var my_arr = [];
var split;
$('td').each(function() {
my_arr.push($(this).children().val());
for (var e = my_arr.length - 1; e--;) {
if (my_arr[e] === "") my_arr.splice(e, 1);


var i, j, chunk = 3;
for (i = 0, j = my_arr.length; i < j; i += chunk) {
split = my_arr.slice(i, i + chunk);
console.log(split);
}
}
})
})
})


HTML

<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<!-- Header Text -->
<div class="col-sm-10 text">
<h1><strong>SAGA</strong> Data Form</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Enter Data Below</h3>
<p>Please Enter Data to be converted</p>
</div>
<div class="form-top-right">
<i class="fa fa-rocket"></i>
</div>
</div>
<div class="form-bottom">
<form action="" class="login-form" method="post" role="form">
<div class="form-group">
<form id="add_name" name="add_name">
<div class="table-responsive">
<table align="center" class="table table-bordered" id="dataTable">
<!-- Form Titles -->
<tr>
<th>Select</th>
<th>Text1</th>
<th>Text2</th>
<th></th><!-- Form Elements -->
</tr>
<tr>
<td><select class="unit selectpicker show-tick form-control" data-live-search="true" id="basic">
<option value="mm">
Millimeters
</option>
<option value="micron">
Micron
</option>
<option value="phi">
Phi
</option>
<option value="inches">
Inches
</option>
<option value="Mesh">
Mesh
</option>
</select></td>
<td><input class="form-control name_list" id="unitVal" name="name[]" placeholder="Enter Unit Here" type="text" value="75000"></td>
<td><input class="form-control name_list" id="percent" name="name[]" placeholder="Enter Percent Finer Here" type="text"></td>
<td><button class="btn btn-success" id="add" name="add" type="button">Add More</button></td>
</tr>
</table>
</div><!-- Place BTN here to submitt form -->
</form>
</div><button class="btn" id="sub" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Answer

Try excluding value from array

  if ($(this).children().val() !== "") {
    my_arr.push($(this).children().val()); 
  }