I create input fields based on my fetched data, but how can I only target the input fields with a value

Question

So, I have a JSON file with syllables , however I have 4 syllable inputs that all go to the JSON file like this:

{
    "main_object": {
        "id": "new",
        "getExerciseTitle": "TestWithNewCMS",
        "language": "nl_NL",
        "application": "lettergrepen",
        "main_object": {
            "title": "TestWithNewCMS",
            "language": "nl_NL",
            "exercises": [{
                    "word": "banaan",
                    "syllables": [
                        "ha",
                        "ha",
                        "",
                        ""
                    ]
                },
                {
                    "word": "Computervrienden",
                    "syllables": [
                        "oh",
                        "man",
                        "help",
                        ""
                    ]
                }
            ]
        },
        "dataType": "json"
    }
}

I have in my front-end a loop that creates input fields based on the syllables (but it DOES NOT fetch the syllables itself. it only creates input fields based on the syllables). What I want to do however is: It should ONLY create the amount of inputs based on syllables that have a value.

going by the JSON file above it would be:

2 input fields for the first one and 3 for the second one, because as you can see I have empty slots aswell. right now it displays 4 input fields, so it creates for the empty slots one aswell. but I only want input fields to be created on the amount of syllables given a value to. (I hope this made sense, tried explaining as good as I could)

this is my code that loops through everything:

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

        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 + ']',
            text: exercise.word
        });
        row.append(audCol, wordCol);
        colLeft.append(row);

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

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

        $.map(exercise.syllables, function (syllable, j) {
            var innerSylCol = $('<div/>', {
                class: 'col-md-3 inputSyllables'
            });

            var sylInput = $('<input/>', {
                'type': 'text',
                'class': 'form-control syl-input',
                'name': 'testid'
            });

            innerSylCol.append(sylInput);
            sylRow.append(innerSylCol);
        });

        sylCol.append(sylRow);

        exer.append(colLeft, sylCol);

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

Answer 1

A trivial way to handle this would be to check the value of the syllable before appending/creating it's element.

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

        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 + ']',
            text: exercise.word
        });
        row.append(audCol, wordCol);
        colLeft.append(row);

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

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

        $.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': 'testid'
            });

            innerSylCol.append(sylInput);
            sylRow.append(innerSylCol);
        });

        sylCol.append(sylRow);

        exer.append(colLeft, sylCol);

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

Quick unrelated note: $.map is useful when you want to create a list from another jQuery list. In this case $.each would make more sense semantically as we don't need to create another list but just iterate over one.