Как использовать шаблонные литералы JavaScript ${...} в JSP?

Оффтоп javascript
1

Я пытаюсь обновлять таблицу с помощью AJAX, но столкнулся с проблемой. Данные приходят нормально, однако при вставке строк в таблицу их значения становятся false. Ниже привожу новый код, который использует другие имена переменных и функций:

document.addEventListener('DOMContentLoaded', function() {
    const полеВвода = document.getElementById('полеВвода');
    полеВвода.addEventListener('input', function() {
        const параметрЗапроса = this.value;
        
        fetch('/новый_путь/поискИсторииПродаж?запрос=' + параметрЗапроса)
            .then(ответ => ответ.json())
            .then(результат => {
                const телоТаблицы = document.querySelector('#таблицаИстории tbody');
                телоТаблицы.innerHTML = '';

                результат.forEach(item => {
                    const стильОстатка = item.неоплаченныйОстаток > 0 ? 'цвет-красный' : 'цвет-зеленый';
                    const новаяСтрока = `
                        <tr class='при-наведении-серый'>
                            <td class='ячейка'>${item.наименование || 'Нет данных'}</td>
                            <td class='ячейка'>${item.количество || '0'}</td>
                            <td class='ячейка'>${item.стоимость || '0'}</td>
                            <td class='ячейка'>${item.сумма || '0'}</td>
                            <td class='ячейка'>${item.оплата || '0'}</td>
                            <td class='ячейка ${стильОстатка}'>${item.неоплаченныйОстаток || '0'}</td>
                        </tr>
                    `;
                    телоТаблицы.insertAdjacentHTML('beforeend', новаяСтрока);
                });
            })
            .catch(ошибка => console.error('Ошибка:', ошибка));
    });
});

Почему именно все значения в таблице отображаются как false, хотя данные в консоли корректны? Как это можно исправить?

2

У меня была похожая проблема. Попробуй использовать Object.entries() для проверки структуры данных перед вставкой:

результат.forEach(item => {
  console.log(Object.entries(item));
  // остальной код
});

Это поможет увидеть, какие именно поля и значения приходят с сервера. Возможно, там все boolean вместо строк/чисел. Если так, надо исправлять на бэкенде. А пока можно добавить приведение типов:

<td>${String(item.наименование) || 'Нет данных'}</td>

Это должно решить проблему с отображением false.

3

да, проблема похожа на что-то со стороны обработки данных. я бы посоветовал проверить, что именно приходит с сервера после fetch запроса. может, там какая-то ошибка в формате json? попробуй вывести в консоль результат до обработки и посмотри, все ли поля на месте. еще можно добавить проверку на существование полей перед вставкой в таблицу, типа:

${item.наименование ? item.наименование : 'Нет данных'}

это поможет избежать undefined. а вообще странно, что все значения false. может, где-то закралась ошибка в логике на бэкенде? в любом случае, разберись с данными до вставки в dom, и все должно заработать

4

Проблема может быть в том, как данные обрабатываются на сервере или передаются клиенту. Попробуйте проверить, в каком формате приходят данные с сервера. Возможно, нужно преобразовать их перед вставкой в таблицу. Также убедитесь, что все поля объекта item существуют и имеют корректные значения. Может помочь добавление проверки на null или undefined для каждого поля при формировании строки таблицы.