如何基于获取的数据动态创建输入字段

Question

我要实现的目标：

具有基于我的JSON文件创建的输入字段。 我的JSON看起来像这样：

{
    "main_object": {
        "id": "new",
        "getExerciseTitle": "Test",
        "language": "nl_NL",
        "application": "lettergrepen",
        "main_object": {
            "title": "Test",
            "language": "nl_NL",
            "exercises": [
                {
                    "word": "test1",
                    "syllables": [
                        "test",
                        "ikels"
                    ]
                },
                {
                    "word": "test2",
                    "syllables": [
                        "test",
                        "ikels",
                        "example3"
                    ]
                },
                {
                    "word": "test3",
                    "syllables": [
                        "test",
                        "ikels"
                    ]
                }
            ]
        },
        "dataType": "json"
    }
}

因此要澄清一下：我在test1中有2个音节，我想在单词test1旁边有2个输入字段。 test2有3个音节，因此我想在我的单词test2旁边加上3个音节（希望这足够清楚）。 这就是我现在作为代码所拥有的，但是我不知道如何定位该单词，因此syllables将仅与放置该单词的位置附加在同一行中。我确实找到了有关syllables.join(' ') ，但我不确定这是否正确。

var fakejson = { // extrapolating this based on the code
    main_object: {
        main_object: {
            exercises: [
                {
                    word: "one"
                },
                {
                    word: "two"
                },
                {
                    word: "three"
                }
            ]
        }
    }
}

function createExercise(json) {
    const exercises = json.main_object.main_object.exercises;
    exercises.forEach(function (exercise) {
        var exer = $('<div/>', {
            'class': 'row'
        })
            .append(
                $('<div/>', {
                    'class': 'col-md-3'
                })
                    .append(
                        $('<div/>', {
                            'class': 'row'
                        })
                            .append($('<div>', {
                                class: 'col-md-3 audioButton'
                            }))
                            .append($('<div>', {
                                class: 'col-md-9 ExerciseWordFontSize exerciseWord',
                                'id': 'wordInput[' + ID123 + ']',
                                text: exercise.word
                            }))
                    )
            ).append(
                $('<div>', {
                    class: 'col-md-9'
                })
                    .append(
                        $('<div/>', {
                            class: 'row'
                        }))
                    .append($('<div/>', {
                        class: 'col-md-3 inputSyllables'
                    }))
            );

        $("#exerciseField").append(exer);
        ID123++;
        exer.find('.audioButton').append(getAudioForWords());
        exer.find('.inputSyllables').append(inputFieldsForSyllables());
    });

}

createExercise(fakejson);

function inputFieldsForSyllables() {
    var getInputField = $('<input/>', {
        'type': 'text',
        'class': 'form-group form-control col-md-3',
        'name': 'inputSyllables'
    });
    return getInputField;
}


function getAudioForWords() {
    var audioBtn = $('<button/>', {
        'class': 'btn btn-primary fa fa-volume-up sound'
    });
    return audioBtn;
}

如您所见，我确实有一个forEach循环，但是我不确定是否可以使用相同的循环创建输入。 我宁愿根本不将syllables显示在前端，否则我将不得不hidden它们，但是如果没有记错的话，它们将保留在“检查元素”中。 图片为您澄清我的意思：

如您所见，它们有自己的行。 所以我音节不会混淆，但将留在他们的行word 。

Answer 1

试试下面的代码，

var obj = {“ main_object”：{“ id”：“ new”，“ getExerciseTitle”：“ Test”，“ language”：“ nl_NL”，“ application”：“ lettergrepen”，“ main_object”：{“ title”： “ Test”，“ language”：“ nl_NL”，“ exercises”：[{“ word”：“ test1”，“ syllables”：[“ test”，“ ikels”]}，{{word“：” test2“， “ syllables”：[“ test”，“ ikels”，“ example3”]}，{“ word”：“ test3”，“ syllables”：[“ test”，“ ikels”]}]}，“ dataType”：“ json“}};

    var exe_array = obj.main_object.main_object.exercises;
    exe_array.forEach(function(val, key){
        var row_element = document.createElement('div');
        row_element.className = 'row';
        var col_element = document.createElement('div');
        col_element.className = 'col-md-3';
        var label = document.createElement('label');
        label.appendChild(document.createTextNode(val.word));
        col_element.appendChild(label);
        var syllables_arr = val.syllables;
        syllables_arr.forEach(function(value) {
            var node = document.createElement('input');
            node.setAttribute('type', 'text');
            node.setAttribute('name', value);
            node.setAttribute('class', 'form-control');
            node.setAttribute('value', value);
            col_element.appendChild(node);
            row_element.appendChild(col_element);
            document.body.appendChild(row_element); 
        })
    });