javascript - 我根据获取的数据创建输入字段，但是如何仅针对具有值的输入字段

Question

所以，我有一个带有 的 JSON 文件syllables，但是我有 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;
}

标签： javascriptjqueryjson

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，语义上会更有意义，因为我们不需要创建另一个列表，只需迭代一个。