динамическое извлечение данных из точек RestEnd

Question

Мне нужно получить данные из конечной точки REST, отобразить их в какой-нибудь фильтруемой таблице и обновить, если что-то изменится на сервере.

(Я не хочу получать данные из статического файла JSON, но каждый раз, когда я выполняю вызов GET для конечной точки покоя, я получаю данные в формате json)

Существуют ли учебники, которые могут помочь мне в этом?

Answer 1

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

Просто вставьте код, который вы используете для вызова конечной точки, например, Ajax вызывает внутри цикла setInterval (), и он должен работать нормально, обновляя пользовательский интерфейс (таблицу и содержимое), поскольку вы повторяете процесс снова и снова.

setInterval(function(){ 

   some AJAX call getting data ...
   ... use the AJAX response (data) to re-draw/update the table contents

}, 3000);

Процесс получения того, что вы хотите:

1. Реализация непрерывного вызова API (setInterval); инициируется при загрузке документа.
2. Изучение и реализация запроса внешнего API, например AJAX
3. Анализ данных, создание HTML с использованием данных для создания структуры таблицы или использование внешней библиотеки таблиц.
4. Используйте созданный HTML-код для динамического изменения DOM с помощью document.getElementById ("# таблица, созданная вами в html"). InnerHTML = ^ # 3

Answer 2

Чтобы сделать вызов выборки для конечной точки API, вы должны использовать JavaScripts, встроенный в метод выборки.Смотрите ниже, я построил выборку и даже вставил фиктивную конечную точку, которая возвращает фактический JSON, чтобы вы могли видеть, что он работает.Просто замените URL сразу после выборки на конечную точку API, из которой вы хотите получить JSON ...

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })

Первый .then проверяет, что данные возвращаются в JSON, а затем передает данные во второй .then.Внутри этого второго .hen вы будете обрабатывать ответ, используя (в данном случае) «data» в качестве имени переменной.Вы можете установить эти параметры на то, что вы хотите вызвать их, хотя.Наконец, консоль .catch просто регистрирует сообщение об ошибке, если выборка не удалась.

Вот ответ, так что вы можете увидеть, как оно работает.Просто нажмите Run, и вы увидите ответ: https://repl.it/repls/UnfoldedVibrantProcessor