prevent empty strings from being part of an array

Question

How can I make my function such that it only sends data when I have something filled out in the input fields? I have a standard of 4 input fields, whenever I insert data in 2 input fields it will send 2 words into my array (that works), but it also sends 2 empty strings. I however want the array to only exist with values and not empty strings. a quick example: You as a user decide to fill out 2 of the 4 input fields (because they are optional). I now want to prevent the 2 other input fields to send an empty string to my JSON aswell. So only what the user has filled out should be part of the array.

This is how my function looks in order to create the input fields for my array:

function getWordPartInput(id, cValue) {
  console.log(cValue);
  cValue = cValue || '';
  var div = $('<div/>');
  for (let i = 0; i < 4; i++) {
    var wpInput = $('<input/>', {
      'class': 'form-group form-control syllable syl ' + TT ++,
      'type': 'text',
      'value': (cValue[i] !== undefined) ? cValue[i] : '',
      'placeholder': 'Syllables',
      'name': 'Syllablescounter['+ i +']'
    });
    div.append(wpInput);
  }
  return div;
}

This is the AJAX call:

function saveExerciseAjaxCall() {
  console.log(setMainObjectArray());

  $.ajax({
    url: 'saveJson.php',
    type: 'POST',
    data: {
      id: getUrlParameter('id'),
      getExerciseTitle: $('#getExerciseTitle').val(),
      language: $('#languageSelector').val(),
      application: 'lettergrepen',
      'main_object': {
        title: $('#getExerciseTitle').val(),
        language: $('#languageSelector').val(),
        exercises: setMainObjectArray()
      },
      dataType: 'json'
    }
  }).done(function(response) {
  }).fail(function(jqXHR, textStatus, errorThrown){
    console.log(jqXHR);
    console.log(errorThrown);
    console.log(textStatus);
  });
}

How setMainObjectArray() looks like:

I am talking about the array syllables.

 function setMainObjectArray() {
var exercises = [];
var eBlocks = $('.eBlock');

eBlocks.each(function(i, eBlock) {
    var exObject = {
      word: $(eBlock).find('input.ExerciseGetWordInput').val(),
      syllables: []
    };
    $(eBlock).find('input.syllable').each(function(j, syll) {

      exObject.syllables.push($(syll).val());            
    });

    exercises.push(exObject);
  });

return exercises;
}

How is the first block of code related to the second? You don't appear to be using the values from the inputs in the AJAX request. That said, all you need to do is check the value of the inputs before sending the request and then add them if a value is provided. — Rory McCrossan
– Rory McCrossan, Commented Jul 9, 2018 at 9:59
The first block (I think you are refering to the function) is how the input field is created/what I have done. I thought that would be usefull info. I editted my post a bit to clarify what I mean with empty strings. — user9999921
– user9999921, Commented Jul 9, 2018 at 10:03
Appreciate the effort, but that is not what I am looking for. it's optional whether you fill out all the 4 input fields or not. however the problem: Let's say you only fill out 2 and leave the other 2 empty, it will show in my array 2 words and 2 empty strings. — user9999921
– user9999921, Commented Jul 9, 2018 at 10:06
What array? You mean in setMainObjectArray()? Need to know what this function does then. — Mark Baijens
– Mark Baijens, Commented Jul 9, 2018 at 10:10

Mark Baijens · Accepted Answer · 2018-07-09 11:01:23Z

1

You can do this to avoid the syllables being filled with empty values.

if($(syll).val() !== "") {
    exObject.syllables.push($(syll).val());
}

edited Jul 9, 2018 at 11:01

answered Jul 9, 2018 at 10:15

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

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

3 Comments

user9999921 Over a year ago

And this will prevent empty strings from being send to my JSON? (I mean, will it ONLY send input fields with a value to my JSON) and empty strings won't be a part of the array: Example: 4 input fields, I fill out 2 of them and let the other 2 empty (because it's optional). will the array only contain 2 words?

Mark Baijens Over a year ago

You add the exObject to the exercises which is the return value of your function. This return value is used in the JSON data for your ajax request. So yes should be.

user9999921 Over a year ago

Thank. You. Very. Much. I have been struggling with this problem for about 3 weeks now. @Mark Baijens

Sateesh · Accepted Answer · 2018-07-09 10:12:30Z

You can put IF condition and SKIP if value is empty

function saveExerciseAjaxCall() {

  // This code will skip AJAX call if value is empty
  if($('#getExerciseTitle').val() == '') {
     return false;
  }

  console.log(setMainObjectArray());

  $.ajax({
    url: 'saveJson.php',
    type: 'POST',
    data: {
      id: getUrlParameter('id'),
      getExerciseTitle: $('#getExerciseTitle').val(),
      language: $('#languageSelector').val(),
      application: 'lettergrepen',
      'main_object': {
        title: $('#getExerciseTitle').val(),
        language: $('#languageSelector').val(),
        exercises: setMainObjectArray()
      },
      dataType: 'json'
    }
  }).done(function(response) {
  }).fail(function(jqXHR, textStatus, errorThrown){
    console.log(jqXHR);
    console.log(errorThrown);
    console.log(textStatus);
  });
}

Collectives™ on Stack Overflow

prevent empty strings from being part of an array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related