Get json image url

Question

I would like some kind of url url request here , and then display the result of an image that 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" }] } 

in a div (div id will be called images). I will need to replace this current code: since it does not load the image, and I'm not sure how to change it. 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

The variable name is changed small, but this should do what you need, you just need to properly access the image property from the object. Also, check out the included coder, which 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 did not specify a closing quotation mark in your URL.

Secondly, the website does not allow javascript to be placed in people's browsers and to make requests to it. This is a collaborative design with browsers and websites. You can see this error if you open the console while executing the request.

XMLHttpRequest cannot load http://www.airport-data.com/api/ac_thumb.json?m=C822AF . The requested resource does not have an Access-Control-Allow-Origin header. The origin of http://www.example.com 'is therefore not permitted.

Thirdly, the response variable has more data than what you 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 the Javascript console in your browser, you will see the object in the log with the attached information. If you add "json" as the third parameter, instead make a response in the data you need:

 $.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 this will not work because the website does not allow cross domain (unless you own it and do not allow your website).

Answer 3

get 'json' through '$ .getJSON'. link sample

 $("#btn").on("click",function(){ var json='{"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"}]}'; var obj = jQuery.parseJSON(json); imageurl = obj.data[0].image; if (imageurl == ""){ $( "#images" ).attr('src', "imageerror.jpg"); } else { $( "#images" ).attr('src', imageurl); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn" >click</button> <img id="images" src=""/>