Want to extract Image from API but my codes only show the text.. May i know what is wrong?

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>

I want to extract the image from the API provided by i wasn't able to show it in the html file

Output shows:

{"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

There are a few problems with the code you presented:

1. You're using document.getElementById("demo") inside a for loop. You're essentially querying the same element again and again and always getting the same result. If you only need to update a single element, just place it outside the for loop, save it to a variable and use it inside the loop. If you're trying to update multiple elements, you should probably be using dynamic class names or query elements differently.
2. For images you should not be using innerHTML. Instead, you can either use and HTML <img> tag and update the src attribute, or you could use a generic HTML tag like <div> or <span> and apply a css rule of background-image with the url of the image.
3. You're not using xhr correctly. You're trying to access the response before it is even sent. Check out an example of how to instantiate and use an xhr object: Sending an XMLHttpRequest

Answer 2

camera.image resolves to the string "https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg", so document.getElementById("demo").innerHTML=camera.image simply sets the contents of your <p id="demo"></p> element to this string:

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

It should be clear why this isn't working: you're putting text in a <p> element and expecting it to show an image. That won't work. You need to use <img> and set its src attribute to this URL for your code to work the way you want:

HTML:

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

Javascript:

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

Answer 3

How does this look? Of course you'd have to implement the AJAX call yourself and whatnot, but you get the idea?

Edit

Have you thoguht about looking at the fetch API? If you want to use xhr, that's fair enough, but fetch is just a newer and nicer way to implement 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

There are several issues in your code:

• You don't define xhr at all. You need to create an XMLHttpRequest object to call send() on.
• You don't define an onload handler for the XHR to execute when the request completes, your logic is simply placed within the root of the function so will just cause errors.
• You're using a for..in loop in an array. Use a plain for loop, or better still, forEach()
• You're updating the text of the #demo element not setting the src of an img
• You need to create a new img element for every item in the returned JSON and then add that to the DOM, presumably within the #demo element
• You're using an inline event handler, onclick, which should be avoided. Use an unobtrusive event handler instead, eg. addEventListener().

With all those points in mind, try this:

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>