如何防止空字符串成為長度的一部分

Question

問題：當插入正確的syllables時，我的輸入字段應該變成綠色按鈕。 但是問題是：它通過JSON的長度與用戶插入的內容的大小來做到這一點，但是當我的數組僅包含2個單詞而不是4個單詞時，它仍然總共需要4個單詞。例如：我的數組中有2個單詞，並且數組中有2個空字符串，我被迫按Enter鍵兩次以達到所需數組的長度。 如何使它僅根據數組中的單詞而不是空字符串檢查長度？

這是我的JSON文件之一的樣子：

{
 "main_object": {
"id": "5",
"getExerciseTitle": "TestFor",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestFor",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "test",
      "syllables": [
        "test01",
        "test02",
        "test03",
        ""
      ]
    },
    {
      "word": "tesst",
      "syllables": [
        "test11",
        "test12",
        "",
        ""
      ]
    }
  ]
},
"dataType": "json"
 }
}

如何創建函數，不要介意增量計數器等。它們已經被聲明。

function createExercise(json) {
const exercises = json.main_object.main_object.exercises;

var exerciseArea = $('<div/>', {
    id: 'exerciseField',
    'class': 'col-md-12'
});

$.map(exercises, function (exercise, i) {

    var exer = $('<div/>', {
        'class': 'row form-group',
        'id': +idRow++
    })

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

    var row = $('<div/>', {
        'class': 'row'
    });

    var audCol = $('<div>', {
        class: 'col-md-3 audioButton'
    }).append(getAudioForWords());

    var wordCol = $('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'wordInput[' + ID123 + ']', // note to self: the brackets will need to be escaped in later DOM queries
        text: exercise.word
    });
    row.append(audCol, wordCol);
    colLeft.append(row);

    var sylCol = $('<div>', {
        class: 'col-md-9'
    });

    var sylRow = $('<div/>', {
        class: 'row syll-row'
    });

    var correctSylls = [];

    $.map(exercise.syllables, function (syllable, j) {
        // Code to check if the syllable exists and is not an empty string
        if(!syllable){
            // 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');
            }

        });

        innerSylCol.append(sylInput);
        sylRow.append(innerSylCol);
    });
    idsyll = 0;

    sylCol.append(sylRow);

    exer.append(colLeft, sylCol);

    exerciseArea.append(exer);
});
return exerciseArea;
}

導致問題的部分：

var correctSylls = [];

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

        });

所以在這里我基本上有兩個問題：1）某種原因在沒有明顯原因的情況下復制數組中的單詞？ 和2）在我的數組中仍然需要4個單詞（空字符串也被視為長度）。 但我不會將字符串為空，因為它們不包含單詞。 另一個問題是：為什么要在數組中復制單詞？

Answer 1

可以過濾數組以僅返回非空項目。 然后循環遍歷map（）中的過濾數組

 var syllables = [ "test11", "test12", "", "" ]; var filtered = syllables.filter(function(str) { return str.trim() }); console.log(filtered)