Javascript 我根据获取的数据创建输入字段，但如何仅以值作为输入字段的目标

因此，我有一个带有

音节的JSON文件，但是我有4个音节的输入，所有这些输入都进入JSON文件，如下所示：

{
    "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"
    }
}

我的前端有一个循环，它根据音节创建输入字段（但它不获取
音节本身。它只根据音节创建输入字段）。然而，我想做的是：它应该只根据有值的
音节创建输入量

根据上面的JSON文件，它将是：

第一个为2个输入字段，第二个为3个，因为正如您所看到的，我也有空插槽。现在它显示了4个输入字段，因此它也为空插槽创建了一个输入字段。但我只希望根据给定值的音节数量创建输入字段。（我希望这是有道理的，尽可能地解释）

这是我的代码，它循环遍历所有内容：

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

函数createExercise（json）{
const exercises=json.main_object.main_object.exercises；
var exerciseArea=$（''{
id:“exerciseField”，
“类别”：“col-md-12”
});
$.map（练习，功能）（练习，i）{
var exer=$（''）{
“类”：“行表单组”
})
var colLeft=$（''{
“类”：“col-md-3”
});
变量行=$（''{
“类”：“行”
});
var audCol=$（''）{
类别：“col-md-3音频按钮”
}).append（getAudioForWords（））；
变量wordCol=$（''）{
类别：“col-md-9 ExerciseWordFontSize exerciseWord”，
“id”：“wordInput['+ID123+']”，
课文：exercise.word
});
行。追加（audCol、wordCol）；
集合追加（行）；
变量sylCol=$（''{
类别：“col-md-9”
});
变量sylRow=$（''）{
类别：“行”
});
$.map（练习.音节，函数（音节，j）{
变量innerSylCol=$（''{
课程：“col-md-3输入音节”
});
变量sylInput=$（''{
“类型”：“文本”，
“类”：“窗体控件syl输入”，
“name”：“testid”
});
innerSylCol.append（sylInput）；
追加（innerSylCol）；
});
sylCol.append（sylRow）；
执行附加（学院、学院）；
exerciseArea.append（exer）；
});
返回练习区；
}
处理这个问题的一个简单方法是在附加/创建音节元素之前检查音节的值

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

函数createExercise（json）{
const exercises=json.main_object.main_object.exercises；
var exerciseArea=$（''{
id:“exerciseField”，
“类别”：“col-md-12”
});
$.map（练习，功能）（练习，i）{
var exer=$（''）{
“类”：“行表单组”
})
var colLeft=$（''{
“类”：“col-md-3”
});
变量行=$（''{
“类”：“行”
});
var audCol=$（''）{
类别：“col-md-3音频按钮”
}).append（getAudioForWords（））；
变量wordCol=$（''）{
类别：“col-md-9 ExerciseWordFontSize exerciseWord”，
“id”：“wordInput['+ID123+']”，
课文：exercise.word
});
行。追加（audCol、wordCol）；
集合追加（行）；
变量sylCol=$（''{
类别：“col-md-9”
});
变量sylRow=$（''）{
类别：“行”
});
$.map（练习.音节，函数（音节，j）{
//用于检查音节是否存在且不是空字符串的代码
如果（！音节）{
//如果它不存在或为空字符串，请提前返回，而不创建/追加元素
回来
}
变量innerSylCol=$（''{
课程：“col-md-3输入音节”
});
变量sylInput=$（''{
“类型”：“文本”，
“类”：“窗体控件syl输入”，
“name”：“testid”
});
innerSylCol.append（sylInput）；
追加（innerSylCol）；
});
sylCol.append（sylRow）；
执行附加（学院、学院）；
exerciseArea.append（exer）；
});
返回练习区；
}

快速无关注释：
$.map
在您希望从另一个jQuery列表创建列表时非常有用。在本例中，
$。每个
在语义上更有意义，因为我们不需要创建另一个列表，只需迭代一个。
您完成了任务。非常感谢你！这正是我想要的哈哈