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中有两个音节，我想在单词test1旁边有两个输入字段。 test2有3个音节，因此我想在我的单词test2旁边有3个音节（希望这个说明足够了）。这就是我现在所拥有的代码，但我不知道如何定位这个单词，因此syllables只会附加到与放入单词相同的行中。我确实发现了{ {1}}，但我不完全确定这是否正确。

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，但如果没有弄错，它们将保留在＆＃34; Inspect Elements＆＃34 ;。一张图片，为您澄清我的意思：

你可以看到他们有自己的行。所以我的音节不会被混合，但会留在hidden的行中。

Answer 1

请尝试以下代码，

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

如何根据提取的数据创建动态输入字段

1 个答案: