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

Question

因此，我有一个带有syllables的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"
    }
}

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

通过上面的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;
}

Answer 1

一种简单的处理方法是在添加/创建其元素之前检查音节的值。

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

快速无关的注释： $.map在您要从另一个jQuery列表创建列表时很有用。 在这种情况下， $.each在语义上会更有意义，因为我们不需要创建另一个列表，而只是遍历一个列表。