Get json, image url

Question

I would like to some how query a url URL Here and then display the image result which looks like this

{"status":200,"count":1,"data":[{
    "image":"http:\/\/www.airport-data.com\/images\/aircraft\/thumbnails\/001\/288\/001288330.jpg",
    "link":"http:\/\/www.airport-data.com\/aircraft\/photo\/001288330.html",
    "photographer":"magnaman"
  }]
}

into a div (div id will be called images). I would need to replace this current code: as it does not load the image and I am not sure how to modify it to do so. Any help is appreciated, thanks.

var imageurl;
      $.get('http://www.airport-data.com/api/ac_thumb.json?m=+value.hex', function (response) { 
        imageurl = response;
        if (imageurl == ""){
            $( "#images" ).attr('src', "imageerror.jpg");
        }
        else {
            $( "#images" ).attr('src', imageurl);

        }

      }); 

Answer 1

Changed up the variable name a tiny bit, but this should do what you need, you just need to access the image property from the object correctly. Also, check out the included codepen I created to simulate how to actually set an image somewhere with jquery.

$.get('http://www.airport-data.com/api/ac_thumb.json?m=C822AF', function(res) {
    var imgUrl = res.data[0].image

    if (imgUrl == "") {
        $("#images").attr('src', "imageerror.jpg");
    } else {
        $("#images").attr('src', imgUrl);
    }
})

https://codepen.io/DZuz14/pen/rzjxEO?editors=1010

Answer 2

First of all, you're missing a closing quotation mark in your URL.

Second, the website doesn't allow you to put javascript in people's browsers and make requests to it. This is a cooperative design with browsers and websites. You can see this error if open the console when making the request.

XMLHttpRequest cannot load http://www.airport-data.com/api/ac_thumb.json?m=C822AF. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.

Third, the response variable has more data to it than just what you've received. If you try this code:

$.get('http://www.airport-data.com/api/ac_thumb.json?m='+value.hex, function (response) { 
    console.log(response);
}); 

Then open your Javascript console in your browser, you'll see the object in the log with nested information. If you add "json" as the third parameter, it will instead make response into the data that you want, like so:

$.get('http://www.airport-data.com/api/ac_thumb.json?m='+value.hex, function (response) { 
    console.log(response);
    imageurl = response.data[0].link;
    if (imageurl == "")
        $( "#images" ).attr('src', "imageerror.jpg");        
    else 
        $( "#images" ).attr('src', imageurl);

}, "json"); 

But it wont work because the website doesn't allow cross domain stuff (unless you own it, and set it to allow your website).