我正在结束一个个人元素并测试任何错误,我修复了大多数错误,但不太清楚如何解决这个问题,它在控制台中输出正确的计数、单位和成分,但似乎输出到网页时不起作用:
8 oz cream cheese, softened
0.25 tsp garlic powder
undefined tsp dried oregano
undefined tsp dried basil
1 cup parmesan cheese
在 parseIngredients
之前(来自 Web 控制台):
0: "8 ounces cream cheese, softened"
1: "1/4 teaspoon garlic powder"
2: " teaspoon dried oregano"
3: " teaspoon dried parsley"
4: " teaspoon dried basil"
5: "1 cup shredded mozzarella cheese"
我怀疑DOM操作可能出了问题,所以我回去检查了几次都没有找到问题所在。
Recipe.js
parseIngredients(){
const unitsLong = ['tablespoons','tablespoon','ounces','ounce','teaspoons','teaspoon','cups','pounds'];
const unitsShort = ['tbsp','tbsp','oz','oz','tsp','tsp','cup','pound'];
const units = [...unitsShort,'kg','g'];
const newIngredients = this.ingredients.map( el=>{
// uniform units
let ingredient = el.toLowerCase();
unitsLong.forEach((unit,i) =>{
ingredient = ingredient.replace(unit,unitsShort[i]);
});
// remove parentheses
ingredient = ingredient.replace(/ *\([^)]*\) */g, ' '); // regular expression
// Parse the ingredient into count, unit and ingredient
const arrIng = ingredient.split(' ');
const unitIndex = arrIng.findIndex(el2 => units.includes(el2));// return true or false
let objIng;
if(unitIndex > -1){
// there is a unit
const arrCount = arrIng.slice(0,unitIndex); // Ex. 4 1/2 cups, arrCount is [4,1/2] & 4 cups, arrCount is [4]
let count;
if(arrCount.length === 1){
count = eval(arrIng[0].replace('-','+'));
} else{
count = eval(arrIng.slice(0,unitIndex).join('+'));
}
objIng ={
count,
unit:arrIng[unitIndex],
ingredient:arrIng.slice(unitIndex +1).join(' ')
};
} else if(parseInt(arrIng[0],10)){
// thre is no unit but 1st element is number
objIng ={
count:parseInt(arrIng[0],10),
unit:'',
ingredient:arrIng.slice(1).join(' ')
}
}else if(unitIndex === -1){
// There is no Unit and no number at 1st element
objIng ={
count:1,
unit:'',
ingredient
}
}
return objIng;
});
this.ingredients = newIngredients;
}
}
更新:感谢社区的所有热心帮助和 Barmar 对问题的出色把握。我做了一些挖掘,发现 food2fork 没有指定配料的数量。所以问题是字符串将有一个单位但没有数量。以下是我的修复,但似乎没有解决“未定义”问题。
let count;
if(arrCount.length === 1){
count = eval(arrIng[0].replace('-','+'));
} else if(arrCount.length === undefined){
count = 1;
}
else{
count = eval(arrIng.slice(0,unitIndex).join('+'));
}
objIng ={
count,
unit:arrIng[unitIndex],
ingredient:arrIng.slice(unitIndex +1).join(' ')
};
我也尝试了以下方法:
arrCount.length === 0 ;
arrCount === null;
仍然,呈现未定义
我是 web-dev 的新手,我真的可以用更有经验的头脑和眼睛来查看这段代码。再次非常感谢所有关注这个问题的人。祝你有美好的一天,编码愉快!!!
更新评论和更新原因:
这道题从debug转为算法题,以后可能对其他人有帮助。
新问题削减了大量不相关的代码。
删除渲染代码,因为后来发现不是问题所在。
最佳答案
我找到了问题的解决方法,请随时引用问题中的代码。 在 Recipe.js 和我们决定如何将成分解析为计数、单位和成分的条件语句中:
arrCount.length
将始终等于 1,因为出于某种原因,解析前的成分有一个 ''
并且在 UnitIndex< 之前读取时
,它算作一个计数
。
因此修复将是:
let count;
if(arrCount.length == 1 && arrCount[0] == 0){
count = 1;
} else if(arrCount.length == 1){
count = eval(arrIng[0].replace('-','+'));
}
else{
count = eval(arrIng.slice(0,unitIndex).join('+'));
}
objIng ={
count,
unit:arrIng[unitIndex],
ingredient:arrIng.slice(unitIndex +1).join(' ')
};
最后,感谢 Barmar 不断为我提供解决此问题的新思路。快乐编码@Barmar,谢谢。
关于javascript - 呈现为未定义,无法完全找出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56906556/