这是让我了解JSON的样子:
{
"main_object": {
"id": "0",
"getExerciseTitle": "TestToConfirm",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
"title": "TestToConfirm",
"language": "nl_NL",
"exercises": [
{
"word": "huisarts",
"syllables": [
"huis",
"arts"
]
},
{
"word": "huisartsenpraktijk",
"syllables": [
"huis",
"artsen",
"praktijk"
]
},
{
"word": "testikels",
"syllables": [
"test",
"ikels"
]
},
{
"word": "Graag gedaan. v",
"syllables": [
"graag",
"gedaan"
]
}
]
},
"dataType": "json"
}
}
如您所见,我有一个word
和一个syllables
。我设法根据syllables
的长度创建了输入字段,但是输入字段的每一行重复9次(注意,因为您可以看到syllables
内总共有9个单词。我是试图让syllables
附加到他们的word
行中(我以为是他们的父母?)。这就是我的代码现在的样子:
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());
});
exercises.forEach(function(exercise) {
lengthsyllables = exercise.syllables.length;
console.log(lengthsyllables);
for (l = 0; l < lengthsyllables; l++) {
var getInputField = $('<input/>', {
'type': 'text',
'class': 'form-group form-control col-md-3',
'name': 'inputSyllables'
});
$('.inputSyllables').append(getInputField);
}
});
}