Why doesn't my trim function work? it still evaluates empty strings aswell

Question

So, I have a JSON file which I fetch. The array syllables can hold up to a max. of 4 strings. However, when I leave out (for example) 2 words, I will end up with 2 words and 2 empty strings. However in my front-end when I try to create a check it will still require 4 "strings". So 2 words + 2 times the key "enter" before it says that the length equals my JSON. However I want empty strings NOT to be part of the length. I have this to trim the length, but I don't know why it doesn't work.

The code:

    var correctSylls = [];

    $.map(exercise.syllables, function (syllable, j) {

        // Code to check if the syllable exists and is not an empty string
       if (!syllable || !syllable.filter(str => str != "").length) {
       // If it doesn't exist or is an empty string, return early without creating/appending elements
           return;
      }

        var innerSylCol = $('<div/>', {
            class: 'col-md-3 inputSyllables'
        });

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('keyup', function() {
            var cValue = $(this).val();
            if (cValue === syllable) {
              correctSylls.push(cValue);
              console.log(correctSylls);
            }
            if (exercise.syllables.length === correctSylls.length) {
              $(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
            }

        });

Right now this piece prevents me from going further:

if (!syllable || !syllable.filter(str => str != "").length) {

with the above code the next error is thrown in:

Uncaught TypeError: syllable.filter is not a function.

But I do call it in my $(document).ready function (This is one big function called createExercise).

I do call the function:

$(document).ready(function () {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {

createExercise(json);
});
}

Now let's say this is my fault and this does the right thing. My main problem will remain: How can I create this part:

if (exercise.syllables.length === correctSylls.length) {
   $(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
   }

so it will ONLY check the value filled out equals the length in my JSON without considering empty strings as a value aswell?

Example: I have in my array of syllables only one word and 3 empty strings. The code above loops through my JSON aswell and creates input fields, so it creates one input field. I now insert that one single word. But according to my check it doesn't contain the same length, because it still has 3 empty strings. Therefore I have to press enter 3 times before it reaches the correct length and changes the background color to green.

The variable exercise holds the value: json.main_object.main_object.exercises; in case anyone wonders.

Cant find any place where `getFilterEmptyString` is being called or referenced. I don't know if i should spend the time to actually read the code. — ASDFGerte, Jul 08 '18 at 14:16
[When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. Click this comment to find out how to provide what we need to help you.](https://stackoverflow.com/help/mcve) — , Jul 08 '18 at 14:17
[What does your step debugger tell you?](http://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems). Your question can be answered very quickly and easily with your step-debugger. You should always try and solve your problems with a step debugger before coming to StackOverflow. — , Jul 08 '18 at 20:28

score 0 · Answer 1 · answered Jul 08 '18 at 14:10

0

The trim() method removes white space from both ends of a string. I think what you are trying to achieve can be done using array.filter like this:

let testArr1 = ["String1", "", "String2", ""];


// instead of doing this
console.log(testArr1.length);


// DO THIS!
console.log(testArr1.filter(str => str != "").length)

answered Jul 08 '18 at 14:10

BlackBeard

10,246
7
52
62

I used your code (I editted my post with your code in it if your oke with that), however now my question remains: the if statement, whenever I use that one it still wants to evaluate the original JSON without the filtered version. How can I achieve this? – Jul 08 '18 at 15:07
@JJShaw `if (!syllable || !syllable.filter(str => str != "").length)` use this in your `if-loop`. There's is no `trim()` method available with array (in your case syllable). As mentioned in my answer `trim()` method is for `string` variables but not for array. – BlackBeard Jul 08 '18 at 15:15
But when I do so it throws in the error of "it's not a function" while I DO have it in a function, not only do I have it in a function, I also call the function in my $(document).ready. EDIT: to be correct: Uncaught TypeError: syllable.filter is not a function – Jul 08 '18 at 15:19
1

@JJShaw can you please update your question's code so that it contains **only** the portion you are having problem with? Also mention what is the input to the function and what do you expect it to return. Provided that, you'll receive better answers. :) – BlackBeard Jul 08 '18 at 15:23
Editted the question in a way you see the original problem that I meant, and the problem that occurs now. I hope this clarifying enough – Jul 08 '18 at 15:36
Quick question: Would a JSON file in my post be worth posting or would that be too much worthless code? – Jul 08 '18 at 15:48

Why doesn't my trim function work? it still evaluates empty strings aswell

1 Answers1