[英]I create input fields based on my fetched data, but how can I only target the input fields with a value
So, I have a JSON file with syllables
, however I have 4 syllable inputs that all go to the JSON file like this: 因此,我有一个带有
syllables
的JSON文件,但是我有4个音节输入,它们都像这样进入JSON文件:
{
"main_object": {
"id": "new",
"getExerciseTitle": "TestWithNewCMS",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
"title": "TestWithNewCMS",
"language": "nl_NL",
"exercises": [{
"word": "banaan",
"syllables": [
"ha",
"ha",
"",
""
]
},
{
"word": "Computervrienden",
"syllables": [
"oh",
"man",
"help",
""
]
}
]
},
"dataType": "json"
}
}
I have in my front-end a loop that creates input fields based on the syllables (but it DOES NOT fetch the syllables
itself. it only creates input fields based on the syllables). 我在前端有一个循环,该循环根据音节创建输入字段(但是它不获取
syllables
本身,而是仅基于音节创建输入字段)。 What I want to do however is: It should ONLY create the amount of inputs based on syllables
that have a value. 但是,我想做的是:它仅应基于具有值的
syllables
创建输入量。
going by the JSON file above it would be: 通过上面的JSON文件将是:
2 input fields for the first one and 3 for the second one, because as you can see I have empty slots aswell. 第一个输入字段为2个,第二个输入字段为3个,因为您可以看到我也有空插槽。 right now it displays 4 input fields, so it creates for the empty slots one aswell.
现在,它显示4个输入字段,因此也会为空插槽创建一个。 but I only want input fields to be created on the amount of syllables given a value to.
但我只希望在给定值的音节数量上创建输入字段。 (I hope this made sense, tried explaining as good as I could)
(我希望这是合理的,并尽我所能解释)
this is my code that loops through everything: 这是我遍历所有内容的代码:
function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
var exerciseArea = $('<div/>', {
id: 'exerciseField',
'class': 'col-md-12'
});
$.map(exercises, function (exercise, i) {
var exer = $('<div/>', {
'class': 'row form-group'
})
var colLeft = $('<div/>', {
'class': 'col-md-3'
});
var row = $('<div/>', {
'class': 'row'
});
var audCol = $('<div>', {
class: 'col-md-3 audioButton'
}).append(getAudioForWords());
var wordCol = $('<div>', {
class: 'col-md-9 ExerciseWordFontSize exerciseWord',
'id': 'wordInput[' + ID123 + ']',
text: exercise.word
});
row.append(audCol, wordCol);
colLeft.append(row);
var sylCol = $('<div>', {
class: 'col-md-9'
});
var sylRow = $('<div/>', {
class: 'row'
});
$.map(exercise.syllables, function (syllable, j) {
var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});
var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name': 'testid'
});
innerSylCol.append(sylInput);
sylRow.append(innerSylCol);
});
sylCol.append(sylRow);
exer.append(colLeft, sylCol);
exerciseArea.append(exer);
});
return exerciseArea;
}
A trivial way to handle this would be to check the value of the syllable before appending/creating it's element. 一种简单的处理方法是在添加/创建其元素之前检查音节的值。
function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
var exerciseArea = $('<div/>', {
id: 'exerciseField',
'class': 'col-md-12'
});
$.map(exercises, function (exercise, i) {
var exer = $('<div/>', {
'class': 'row form-group'
})
var colLeft = $('<div/>', {
'class': 'col-md-3'
});
var row = $('<div/>', {
'class': 'row'
});
var audCol = $('<div>', {
class: 'col-md-3 audioButton'
}).append(getAudioForWords());
var wordCol = $('<div>', {
class: 'col-md-9 ExerciseWordFontSize exerciseWord',
'id': 'wordInput[' + ID123 + ']',
text: exercise.word
});
row.append(audCol, wordCol);
colLeft.append(row);
var sylCol = $('<div>', {
class: 'col-md-9'
});
var sylRow = $('<div/>', {
class: 'row'
});
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if(!syllable){
// If it doesn't exist or is an empty string, return early without creating/appending elements
return;
}
var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});
var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name': 'testid'
});
innerSylCol.append(sylInput);
sylRow.append(innerSylCol);
});
sylCol.append(sylRow);
exer.append(colLeft, sylCol);
exerciseArea.append(exer);
});
return exerciseArea;
}
Quick unrelated note: $.map
is useful when you want to create a list from another jQuery list. 快速无关的注释:
$.map
在您要从另一个jQuery列表创建列表时很有用。 In this case $.each
would make more sense semantically as we don't need to create another list but just iterate over one. 在这种情况下,
$.each
在语义上会更有意义,因为我们不需要创建另一个列表,而只是遍历一个列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.