Отобразить как неопределенный, не могу понять ошибку

Question

Я завершаю личный проект и тестирую на любую ошибку, я исправил ошибку большинства и не могу понять, как ее устранить, которая выводит правильные числа, единицы измерения и ингредиенты в консоль, но кажется не работает при выводе на веб-страницу:

8 oz cream cheese, softened 
0.25 tsp garlic powder
undefined tsp dried oregano
undefined tsp dried basil
1 cup parmesan cheese

До parseIngredients (из веб-консоли):

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; 
    }
}

Обновлено: спасибо за всю восторженную помощь сообщества и за то, что Бармар отлично понял проблему. Я немного покопался и узнал, что 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, и я действительно мог бы использовать более опытный ум и глаза, чтобы взглянуть на этот код. И еще раз большое спасибо всем людям, которые смотрят на проблему. Удачного дня и счастливого кодирования !!!

Обновленные комментарии и причина обновлений:

1. Эта проблема перешла от отладки к проблемам алгоритма, может помочь другим в будущем.

2. Новый вопрос затрагивает значительные несвязанные коды.

3. Удалить код рендеринга, поскольку позже выясняется, что это не проблема.

Answer 1

Я нашел решение проблемы, смело обращайтесь к коду в вопросе. В Recipe.js и в условном заявлении о том, как мы решили разделить ингредиенты на количество, единицу и ингредиент:

arrCount.length всегда будет равно 1, потому что по какой-то причине ингредиенты перед синтаксическим анализом имеют '', а при чтении до UnitIndex оно считается как count.

Поэтому исправление будет:

                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, и спасибо.