[英]How can I prevent empty strings in my array from counting as a part of length?
So, I have a JSON file which I fetch. 因此,我有一个要提取的JSON文件。 The array
syllables
can hold up to strings max. 数组
syllables
最多可容纳字符串。 however, when I leave out (for example) 2 words, I will end up with 2 words and 2 empty strings. 但是,当我遗漏(例如)2个单词时,我将得到2个单词和2个空字符串。 However in my front-end when I try to create a check it will still require 4 "strings".
但是,当我尝试创建支票时,在前端仍然需要4个“字符串”。 So 2 words + 2 times the key "enter" before it says that the
length
equals my JSON. 因此,在说
length
等于我的JSON之前,输入2个单词+ 2倍于“输入”键。 However I want empty strings NOT to be part of the length
. 但是我不希望空字符串成为
length
一部分。
How my JSON looks like (I took an example with more words and more syllables
arrays): JSON的样子(我举了一个例子,其中包含更多单词和更多
syllables
数组):
{
"main_object": {
"id": "5",
"getExerciseTitle": "TestFor",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
"title": "TestFor",
"language": "nl_NL",
"exercises": [
{
"word": "test",
"syllables": [
"test01",
"test02",
"test03",
""
]
},
{
"word": "tesst",
"syllables": [
"test11",
"test12",
"",
""
]
}
]
},
"dataType": "json"
}
}
the piece of code which could cause this: 可能导致此问题的代码段:
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if (!syllable || !syllable.trim().length) {
// 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': +c++,
'id': +idsyll++
}).on('keyup', function() {
var cValue = $(this).val();
if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}
if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
}
});
How the whole code looks like: 整个代码如下所示:
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',
'id': +idRow++
})
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 + ']', // note to self: the brackets will need to be escaped in later DOM queries
text: exercise.word
});
row.append(audCol, wordCol);
colLeft.append(row);
var sylCol = $('<div>', {
class: 'col-md-9'
});
var sylRow = $('<div/>', {
class: 'row syll-row'
});
function getFilterEmptyString() {
var filtered = syllables.filter(function(str) {
return str.trim()
});
console.log(filtered);
}
var correctSylls = [];
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if (!syllable || !syllable.trim().length) {
// 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': +c++,
'id': +idsyll++
}).on('keyup', function() {
var cValue = $(this).val();
if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}
if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
}
});
innerSylCol.append(sylInput);
sylRow.append(innerSylCol);
});
idsyll = 0;
sylCol.append(sylRow);
exer.append(colLeft, sylCol);
exerciseArea.append(exer);
});
return exerciseArea;
}
What I was thinking of, but not entirely sure: Couldn't a loop do this? 我在想什么,但不能完全确定:这不是循环执行的吗?
Notes: Variables have already been declared etc. I tried to put as much code in that's just related to THIS problem. 注意:变量已经声明,等等。我试图在其中添加与该问题有关的代码。
You could count them with a check for truthy values. 您可以通过检查真实值来计算它们。
var syllables = ["test11", "test12", "", ""], count = syllables.reduce((c, s) => c + Boolean(s), 0); console.log(count);
Or create a new array, if needed later and take the length 或创建一个新的数组,如果以后需要的话,取其长度
var syllables = ["test11", "test12", "", ""], truthy = syllables.filter(Boolean); console.log(truthy.length); console.log(truthy);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.