Как отобразить изображения, расположение которых в файле JSON, доступ к которому осуществляется через XMLHttpRequest?

Question

Вот пример данных JSON (https://api.data.gov.sg/v1/transport/traffic-images):

{
  "items": [
    {
      "timestamp": "2018-12-19T15:18:38+08:00",
      "cameras": [
        {
          "timestamp":"2018-12-19T15:17:18+08:00",
          "image":"https://images.data.gov.sg/api/traffic-images/2018/12/d18c7fee-f2a4-454a-b68f-c21dd3c34493.jpg",
          "location": {
            "latitude": 1.29531332,
            "longitude":103.871146
          },
          "camera_id": "1001",
          "image_metadata": {
            "height": 240,
            "width": 320,
            "md5": "230ef16904c20b3108d7b5c378912a4a"
          }
        },
        {
          "timestamp": "2018-12-19T15:17:18+08:00",
          "image": "https://images.data.gov.sg/api/traffic-images/2018/12/2cca04f5-7c76-4887-a683-85f5f2f7e5fa.jpg",
          "location": {
            "latitude": 1.319541067, 
            "longitude": 103.8785627
          },
          "camera_id": "1002",
          "image_metadata": {
            "height": 240,
            "width": 320,
            "md5": "818f64f1362871f28780ee6721c0befa"
          }
        }
      ]
    }
  ]
}

Мой HTML-код:

<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
  function loadDoc() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET","api.data.gov.sg/v1/transport/traffic-images",true); 
    // ...
    xhr.send();
  }
</script>

Я все еще очень плохо знаком с HTML и AJAX в целом, так что правильномне, если я ошибаюсь, но есть ли отметка времени в массиве элементов? Также лучше ли извлечь изображение из xhr.responseText напрямую? Есть ли способ сделать это?

В основном ссылка на изображение сохранитменяется каждые 20 секунд при отображении прямой трансляции.

Answer 1

1. Каждый элемент имеет временную метку

2. Используйте 'json' в качестве типа ответа в XHR, тогда у вас есть данные в xhr.response:

   const xhr = new XMLHttpRequest()
   xhr.open('GET','https://api.data.gov.sg/v1/transport/traffic-images',true)
   xhr.responseType = 'json'
   xhr.onreadystatechange = function() {
     if (xhr.readyState !== 4) return
     const data = xhr.response
     const element = document.getElementById('demo')
     element.innerHTML = ''
     for (let item of data.items) {
       for (let camera of item.cameras) {
         const img = document.createElement('img')
         img.src = camera.image
         element.appendChild(img)
       }
     }
   }
   xhr.send(null)