Javascript 如何创建foreach循环以在各自单词的每个输入中放置音节

我有一个练习块，有一个

单词和四个
音节。在我的json中，它如下所示：

{
"main_object": {
"id": "new",
"getExerciseTitle": "TestFrontEnd",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestFrontEnd",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "huisarts",
      "syllables": [
        "Huis",
        "arts",
        "",
        ""
      ]
    },
    {
      "word": "voetbal",
      "syllables": [
        "Voet",
        "bal",
        "",
        ""
      ]
    }
  ]
},
"dataType": "json"
 }
}

我想循环浏览这些
单词
和
音节
，但每个
单词
必须保留在一个练习块中的
音节
。现在我试着这么做，但失败了很多：

$(document).ready(function () {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {


 var exercisetitle = json.main_object.getExerciseTitle;
    $("#getExerciseTitle").val(exercisetitle);


 var exercise = json.main_object.main_object.exercises;
    $.map(exercise, function(exercise, i) {
        $("#addOpdracht").click();
        $(".exerciseGetWordInput_" + i).val(exercise.word) 
         console.log(exercise.syllables);
          $(".sylll" + i).val(exercise.syllables)
    });

  });

});

为了让你看到它，它应该是这样的


但是它看起来像这样

那么我该怎么做才能得到我想要的结果呢

编辑：创建音节输入和练习输入的函数：

// This is the function that creates the exercise inputs 
function getWordInput(id, cValue) {
 cValue = cValue || '';
 var wInput = $('<input/>', {
'class': 'exerciseGetWordInput_' + id + ' form-group form-control ExerciseGetWordInput',  
'type': 'text',
'name': 'question_takeAudio_exerciseWord['+ exerciseAudioInput +']',
'placeholder': 'Exercise',
'id': 'exerciseGetWordInput',
'required': true
 });
 return wInput;
}


 // This is the function that creates the syllable inputs.
function getWordPartInput(id, cValue){
cValue = cValue || '';
var wpInput = $('<input/>', {
'class': 'form-group form-control syllable sylll' + TT ++,
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'name': 'Syllablescounter['+ SyllablesID++ +']'
});
 return wpInput;
}

//这是创建练习输入的函数
函数getWordInput（id，cValue）{
C值=C值| |''；
var wInput=$（''{
“类”：“exerciseGetWordInput”+id+“表单组表单控件exerciseGetWordInput”，
“类型”：“文本”，
'name'：'question_takeAudio_exerciseWord['+exerciseAudioInput+']，
“占位符”：“练习”，
'id'：'exerciseGetWordInput'，
“必需”：true
});
返回wInput；
}
//这是创建音节输入的函数。
函数getWordPartInput（id，cValue）{
C值=C值| |''；
变量wpInput=$（''{
'class'：'form group form control Syll'+TT++，
“类型”：“文本”，
“值”：cValue，
“占位符”：“音节”，
“名称”：“音节计数器['+音节ID++']”
});
返回输入；
}
我不知道您是如何设置HTML的，但这应该会让您朝着正确的方向开始

我没有使用
$.map
，因为看起来您并不想要一个新的数组，而是想对当前数组做些什么。因此，我改为使用内置于
forEach（函数（项，索引）{..}）
array函数中的Javascripts。但是，我使用了这个版本

最后，我还使用了使jQuery选择器的创建更加简洁


const练习=[{
“单词”：“huisarts”，
“音节”：[
“回族”，
“艺术”，
"",
""
]
},
{
“单词”：“voetbal”，
“音节”：[
“哇”，
“bal”，
"",
""
]
}
];
//forEach（（练习，索引）=>{..}）是
//forEach（函数（练习，索引）{..}）；
//参见ES6箭头函数
练习。forEach（（练习，索引）=>{
const word=exercise.word；//抓取单词-huisarts/voetbal
const syls=exercise.sylles；//获取音节数组
const container=$（`.word-${index+1}`）；//根据我们的索引（index）获取正确的容器
const docContainer=document.querySelector（`.word-${index+1}`）；
$（'.word'，container.val（word）；//将单词分配给第一个输入
//每个音节
syls.forEach（（syl，i）=>{
$（'.syl'，container.eq（i）.val（syl）；//根据索引（i）将音节分配给正确的输入
docContainer.querySelectorAll（'.syl'）[i].value=syl；
});
});
表格，
tr{
宽度：100%；
}
运输署{
宽度：50%；
填充：0 10px；
}
.word-1输入，
.word-2输入{
显示：块；
宽度：100%；
}

另请参见：了解如何设置
exerciseGetWordInput\u
和
Syll
，这将有所帮助。似乎每个练习都应该是exerciseGetWordInput_1，然后是
syll_1_1
，
syll_1_2
，
syll_1_3
，以及
syll_1_4
（第一个数字表示练习，第二个数字表示syll）。通过这种方式，你可以轻松地将练习和syll保持在一起。你可能还需要另一个循环来循环练习中的音节数组。我编辑了这篇文章，以便你能更好地了解它，我并没有真正使用HTML来创建输入字段或任何东西。我尝试用jquery和javascript尽可能多地实现这一点。我希望我的编辑提供了足够的信息。另外，是否可以不使用ajax/libs.jquery脚本？这与我的网站的其他功能不谋而合。我仍然很感激你刚才付出的努力。所以非常感谢你的“狂野”Beard@JJShaw您不必使用jQuery，但它使生活变得更加轻松。尤其是在创建新元素时。我使用的唯一jQuery是
$（'selector'）
和
.eq（index）
，这可以在没有jQuery的情况下轻松完成。至于不使用jQuery的ajax，你可以，但同样，它让生活变得非常简单。至于另一个选择，虽然没有说你的代码有缺陷或什么，但很可能是我的错。。。但我似乎得到：“uncaughttypeerror:无论何时我试图使用代码，都无法读取null的属性'querySelector'。你能/你有时间进一步澄清一下你的代码吗？我可以向你展示我尝试过的东西，但那会把原来的帖子弄得一团糟。。所以是的。我仍然非常感谢你的努力much@JJShaw听起来像是
文档。querySelector
失败。确保文档的
拼写正确<代码>文档
是全局的，因此您应该可以在代码中的任何位置使用它。我还更新了我的代码片段，以显示jQuery和
文档的用法是否正常工作。