I made the Random Quote API but I would like to add an image and for that I call the Wikipedia API.
So I push my quoteAuthor variable from the Quote API and push it to the Wiki url API but I have some issues. Look below.
I have a problem about HTTP and HTTPS request.
So my API cannot load, I have some erros in my console. But even if I add an HTTPS on codepen
and also on my first API Quotes it didnt work.
Well, I Wanna access that property below, and I cannot because the number is the page ID and is changing everytime I Have a new quote, how can I jump over to pick the Image File ?
The thing that comes to my mind is to iterate through that object in pages, even though it’s just one property. I’m not aware of other possible approaches…
for (var key in data2.query.pages) {
var obj = data2.query.pages[key]; // This would now be the object the random number is pointing to
console.log(data2.query.pages[key]);
break; // If you're pretty sure that `pages` only ever has one property, you may omit this.
}
I have a problem on my syntax below for :
$(".image").css(“background-image”, "url(…
I cannot find out what I made wrong…
$.getJSON(api2, function(data2){
for (var key in data2.query.pages) {
var obj = data2.query.pages[key]; // This would now be the object the random number is pointing to
//break; // If you're pretty sure that `pages` only ever has one property, you may omit this.
}
console.log(obj);
$(".image").css("background-image", "url('https://en.wikipedia.org/wiki/'+obj.title+'#/media/File:'+obj.pageimage)");
});
This is a sample of your url: https://en.wikipedia.org/wiki/Kahlil_Gibran#/media/File:Khalil_Gibran.jpg
It doesn’t point to an actual image file. It turns out this is the url that you want: https://upload.wikimedia.org/wikipedia/commons/8/87/Khalil_Gibran.jpg
Another problem here is that we don’t have any idea what those numbers are. You can’t just plug in another image file name. Your best bet would be to consult their documentation on how you can actually get a valid url. You also have to handle cases where there are no images provided by the JSON at all.