Я хочу извлечь изображение из API, но мои коды показывают только текст. Могу я узнать, что не так?

Question

<button type = "button" onclick="loadDoc">IMAGE TEST</button>
<p id = "demo"></p>
<script>
    function loadDoc(){
        for (let item in Response.items) {
             for (let camera in item.cameras) {
                  const imageUrl = camera.image; 
                  document.getElementById("demo").innerHTML=camera.image;
             }
        }
        xhr.open("GET","https://api.data.gov.sg/v1/transport/traffic-images",true);
        xhr.send();
    };
</script>

Я хочу извлечь изображение из предоставленного API. Я не смог показать его в html-файле

Вывод показывает:

{"items":[{"timestamp":"2018-12-20T21:59:41+08:00","cameras":[{"timestamp":"2018-12-20T21:59:21+08:00","image":"https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg","location":{"latitude":1.27414394350065,"longitude":103.851316802547},"camera_id":"1501","image_metadata":{"height":240,"width":320,"md5":"7bcfabb38b60a18f1380bffca095d6c0"}},{"timestamp":"2018-12-20T21:59:21+08:00","image":"https://images.data.gov.sg/api/traffic-images/2018/12/06c05520-98b6-4086-b691-1bb54ed90482.jpg","location":{"latitude":1.27135090682664,"longitude":103.861828440597},"camera_id":"1502","image_metadata":.....

Answer 1

В вашем коде есть несколько проблем:

• Вы вообще не определяете xhr.Вам нужно создать XMLHttpRequest объект для вызова send() on.
• Вы не определяете обработчик onload для XHR, который будет выполняться после завершения запроса, ваша логика просто помещается в кореньфункции так просто вызовет ошибки.
• Вы используете цикл for..in в массиве.Используйте простой цикл for или, что еще лучше, forEach()
• Вы обновляете текст элемента #demo, не устанавливая src для img
• Вам необходимо создать новый элемент img для каждого элемента в возвращенном JSON, а затем добавить его в DOM, предположительно в элементе #demo
• Вы используете встроенныйобработчик события, onclick, которого следует избегать.Вместо этого используйте ненавязчивый обработчик событий, например.addEventListener().

Учитывая все эти моменты, попробуйте следующее:

document.querySelector('#load').addEventListener('click', function() {
  var div = document.getElementById('demo');
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.data.gov.sg/v1/transport/traffic-images", true);
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    response.items.forEach(function(item) {
      item.cameras.forEach(function(camera) {
        var img = document.createElement('img');
        img.src = camera.image;
        div.appendChild(img);
        
        var p = document.createElement('p');
        p.innerText = camera.location.latitude + ', ' + camera.location.longitude;
        div.appendChild(p);
      });
    });
  };
  xhr.send();
});

<button type="button" id="load">IMAGE TEST</button>
<p id="demo"></p>

Answer 2

camera.image разрешается в строку "https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg", поэтому document.getElementById("demo").innerHTML=camera.image просто устанавливает содержимое вашего элемента <p id="demo"></p> в эту строку:

<p id="demo">
    https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg
</p>

Должно быть понятно, почему это не такработает: вы помещаете текст в элемент <p> и ожидаете, что он покажет изображение.Это не сработает.Вам нужно использовать <img> и установить его атрибут src для этого URL, чтобы ваш код работал так, как вы хотите:

HTML:

<img id="demo" src="">

Javascript:

$('#demo').attr('src', camera.image);

Answer 3

Как это выглядит?Конечно, вам нужно было бы реализовать вызов AJAX самостоятельно и еще много чего, но вы поняли?Если вы хотите использовать xhr, это достаточно справедливо, но fetch - это просто более новый и приятный способ реализации xhr.

.

const url = 'https://api.data.gov.sg/v1/transport/traffic-images';
let appRoot, btn;

// Go get the data, return a promise. 
const getData = () => fetch(url).then(imgs => imgs.json());

// Output the image. 
const processImage = img => {
  const el = document.createElement("img");
  el.setAttribute("src", img.image);
  appRoot.append(el);
};

// Iterate over the data from the getData function.
const process = data => {
  appRoot.innerHTML = "";
  data.items.forEach(o => o.cameras.forEach(img => processImage(img)));
};

// Bind the event hanlder to the event. 
const bindEvents = () => btn.onclick = () => getData().then(process);

// A simple function to launch everything.
const launch = () => {
  console.log('Starting...');
  btn = document.getElementById("loadDoc");
  appRoot = document.getElementById("demo");
  bindEvents();
};

// Start the app.
launch();

<button type="button" id="loadDoc">IMAGE TEST</button>
<div id="demo"></div>

Answer 4

Есть несколько проблем с кодом, который вы представили:

1. Вы используете document.getElementById("demo") внутри цикла for.По сути, вы снова и снова запрашиваете один и тот же элемент и всегда получаете один и тот же результат.Если вам нужно обновить только один элемент, просто поместите его вне цикла for, сохраните его в переменной и используйте в цикле.Если вы пытаетесь обновить несколько элементов, вам, вероятно, следует по-разному использовать динамические имена классов или элементы запроса.
2. Для изображений не следует использовать innerHTML.Вместо этого вы можете либо использовать тег HTML <img> и обновить атрибут src, либо использовать общий тег HTML, например <div> или <span>, и применить правило CSS background-image с URL-адресом изображения.
3. Вы неправильно используете xhr.Вы пытаетесь получить доступ к ответу еще до его отправки.Посмотрите пример того, как создать экземпляр и использовать объект xhr: Отправка XMLHttpRequest