Проблема со сканированием обновленных данных таблицы в SPA с помощью JavaScript

Я разрабатываю сканер для службы, построенной как одностраничное приложение (SPA).

Я не уверен, используется ли платформа React, Angular или что-то еще. Мой сканер взаимодействует с таблицей, которая отображается после нажатия кнопки с идентификатором queries-process-button. У таблицы есть класс i3WFpf.

Когда я впервые просматриваю таблицу, все работает отлично, и данные извлекаются правильно. Однако когда я перехожу в другое меню и пытаюсь просканировать данные новой таблицы, мой сканер по-прежнему возвращает данные из исходной таблицы, хотя содержимое таблицы визуально обновилось на странице.

Интересно, что когда я перезагружаю всю страницу и затем просматриваю новую таблицу, извлекаются правильные данные. Но опять же, проблема сохраняется, когда я пытаюсь просканировать любую последующую таблицу.

Вот фрагмент кода, который я использую в консоли браузера:

const table = document.querySelector('table.i3WFpf');

if (table) {
    const rows = table.rows;

    for (let i = 0; i < rows.length; i++) {
        let cells = rows[i].cells;
        let rowData = [];
        for (let j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText); 
        }
        console.info(`Row ${i + 1}:`, rowData);
    }
} else {
    console.info("Table with class 'i3WFpf' not found.");
}

Как мне теперь изменить свой сканер, чтобы он правильно получал обновленные данные таблицы без необходимости перезагрузки страницы?

Есть ли способ гарантировать, что сканер всегда извлекает самые последние данные, отображаемые в таблице, особенно в контексте SPA?

Основываясь на доступной на данный момент информации, я могу только догадываться, но похоже, что сайт, который вы очищаете, может просто создать новую вторую таблицу и скрыть первую. Но document.querySelector('table.i3WFpf'), конечно, предоставит вам только первый соответствующий элемент, найденный в документе.

C3roe 23.08.2024 15:39

@C3roe Это возможно, но я в этом сомневаюсь. Этот сервис связан с одним из сервисов Google под названием Search Console.

majid 23.08.2024 15:53

Вы выполняете очистку на стороне клиента, поэтому можно захватить только то, что в данный момент находится в DOM. Если вы все еще получаете «старые данные», когда «новые данные» уже отображаются, это может означать только то, что «старые данные» все еще находятся в DOM.

C3roe 23.08.2024 16:03

@C3roe Верно, я тоже думаю, что DOM не обновился. Зная это, как вы думаете, что можно сделать, чтобы решить эту проблему?

majid 23.08.2024 16:09

Использовали ли вы инструменты разработки браузера для проверки отображаемых элементов?

C3roe 26.08.2024 07:56

@C3roe да, я использовал инструменты разработки для проверки новых данных и выполнения приведенного выше кода.

majid 26.08.2024 10:30

А элемент, содержащий новый контент, действительно соответствует селектору table.i3WFpf? Но тогда querySelector все равно предоставит вам только первый элемент, соответствующий селектору, если старый все еще существует в DOM. Возможно, вам придется использовать querySelectorAll, а затем выбрать последнюю таблицу или что-то в этом роде.

C3roe 26.08.2024 10:44

@C3roe Молодец, друг мой! Добавьте свой ответ, пожалуйста, за этот выбор

majid 26.08.2024 11:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
const table = document.querySelector('table.i3WFpf');

querySelector вернет только первый элемент, соответствующий селектору.

Если сайт, который вы хотите очистить, загружает дополнительные данные в таблицу, соответствующую тому же селектору, и только скрывает исходную таблицу, но сохраняет ее в DOM — тогда вам нужно переключиться на использование querySelectorAll, а затем выбрать последнюю (предположительно? ) соответствующий элемент, который он находит.

Другие вопросы по теме