如何基於獲取的數據動態創建輸入字段

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