Question

我正在包装一个个人项目并测试是否有任何错误，我修复了大多数错误，并且还不太清楚如何解决该错误，该错误在控制台中输出了正确的数量，单位和成分，但是似乎输出到网页时不起作用：

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开发的新手，我确实可以使用经验更丰富的头脑和眼睛来查看此代码。再次非常感谢所有关注此问题的人们。祝您有美好的一天，并祝您编程愉快！

更新的评论和更新原因：

此问题从调试到算法问题，可能在将来有所帮助。
新问题削减了大量无关的代码。
删除渲染代码，因为后来发现这不是问题。

Answer 1

我找到了解决问题的方法，可以随时参考问题中的代码。在Recipe.js和关于如何决定将成分解析为计数，单位和成分的条件语句中：

sed -i "/.*\"${sed_regex}_PROJECT.*\"/ s/$.*\".*\".*:.*\"$.*$\".*$/\11.22.333.4444\2/" ~/my-file.json;始终等于1，因为出于某种原因，解析之前的成分具有awk，并且在arrCount.length之前读入时，它算作{{1} }。

因此，解决方法将是：

''

最后，感谢Barmar继续为我提供解决方法的新思路。 @Barmar，祝您编码愉快，谢谢。

渲染为未定义，无法完全找出错误

1 个答案: