Почему бесконечно вызывается функция?

Question

[Danya Kozlovskiy]

Здравствуйте, вывожу из json полученного через ajax в таблицу html, а так же еще есть фильтрация по myArray.price. При вводе в фильтр от 0 до 0 выводить таблицу полностью, при пустых инпутах выводить, что таких значений нет.
Функция consoleLog(), которая отвечает и за фильтр и за построение таблицы вызывается на клик по кнопке. Фильтр работает более-менее, кроме одного момента - если из-за фильтра не выводится ни одного значения, то функция зацикливается. Как это исправить?

<input type="text" id="start" value="0">
    <input type="text" name="" id="end" value="0">
    <button type="button" id="btn" >Обновить</button>

    <div id="error"></div>
    <table id="table">


    </table>

var myArray;
        async function getJson() {
            const res = await fetch('ссылка')
            myArray = await res.json();
            //  = JSON.stringify(good);
        }

        async function consoleLog() {

            await getJson();
            console.log(myArray[0].name);
            var startValue = document.getElementById('start').value;
            var endValue = document.getElementById('end').value;
            var div = document.getElementById('error');
            var count = 0;
            div.innerHTML = '';
            if (!endValue && !startValue) {
                console.log('pampam');
                document.getElementById('table').innerHTML = '';

                div.innerHTML = " Заданных значений в таблице нет ";
                return false;
            }
            document.getElementById('table').innerHTML = '<tr><td>ID</td > <td>Имя</td><td>Количество</td><td>Цена</td><td>Сумма</td> </tr > ';

            for (let i = 0; i < myArray.length; i++) {

                let summ = myArray[i].quantity * myArray[i].price;
                if (startValue == '0' && endValue == '0') {
                    document.getElementById('table').innerHTML +=
                        " <tr> <td>" + i + "</td> <td>" + myArray[i].name + "</td> <td>" + myArray[i].quantity + "</td> <td>" + myArray[i].price + "</td> <td>" + summ + "</td> </tr> ";
                    count++;
                }
                else if (startValue <= myArray[i].price && myArray[i].price <= endValue) {
                    document.getElementById('table').innerHTML +=
                        " <tr> <td>" + i + "</td> <td>" + myArray[i].name + "</td> <td>" + myArray[i].quantity + "</td> <td>" + myArray[i].price + "</td> <td>" + summ + "</td> </tr> ";
                    count++;
                }



            }
            if (count == '0') {
                consoleLog(count);
                document.getElementById('table').innerHTML = '';
                div.innerHTML = " Заданных значений в таблице нет ";
                count++;
            }
            return false;
}
btn.onclick = function () {
            consoleLog();
        }

Comments

[Danya Kozlovskiy]

VicTHOR, исправил на такую, но все равно она выполняется бесконечно.

var myGetJson;
        async function getJson() {
            const res = await fetch('ссылка')
            myGetJson = await res.json();
            //  = JSON.stringify(good);
            return myGetJson;
        }

        async function consoleLog() {
            
            var myArray = await getJson();

[Danya Kozlovskiy]

VicTHOR, как я понимаю эта строчка console.log(myArray[0].name); в начале функции consoleLog. Но вряд ли выполняется только одна строка, а значит выполняется вся функция постоянно, если не выводится ни одного из значений.

[Danya Kozlovskiy]

VicTHOR, вот если я ввожу 2 и 4, то идет бесконечный вызов.

[Danya Kozlovskiy]

VicTHOR, все как бы правильно работает, но этот бесконечный вызов меня не радует

[Danya Kozlovskiy]

VicTHOR, мне в консоль постоянно выводится myArray[0].name вплоть до бесконечности и это происходит только когда ни одно из значений не попадает под фильтрацию.
0 - 0 = вывод всей таблицы
пустое - пустое = вывести, что таких значений нет
0 - 10000 = выведутся значения от 0 до 10000 ( такие значения есть )
0 - 6000 = должно вывести, что таких значений нет ( а таких значений нет ), так и происходит , но еще функция зацикливается, пока я не введу новые значения. Причем функция у меня выполняется по нажатию на кнопку, но если ввести значения, даже не нажимая на кнопку, то фильтр все равно сработает, что подтверждает что функция зацикливается.
Надеюсь понятно объяснил).

[Danya Kozlovskiy]

VicTHOR, она вызывается при клике на кнопку.
Числа в фильтрацию я беру из двух инпутов.

var startValue = document.getElementById('start').value;
            var endValue = document.getElementById('end').value;

Фильтр

else if (startValue <= myArray[i].price && myArray[i].price <= endValue) {
                    document.getElementById('table').innerHTML +=
                        " <tr> <td>" + i + "</td> <td>" + myArray[i].name + "</td> <td>" + myArray[i].quantity + "</td> <td>" + myArray[i].price + "</td> <td>" + summ + "</td> </tr> ";
                    count++;
                }

[Danya Kozlovskiy]

VicTHOR, в этих значениях лежат значения которые напишу в инпутах. Вот и я не понимаю почему. Попробуйте взять код, который я оставил, вомзожно что-то поймете.

[Danya Kozlovskiy]

VicTHOR, я нашел проблему... это название функции из-за которой я не видел, что вместо console.log вызывается consoleLog