ISSUE to access PROPERTY when adding Wiki API to pick the image

Project Feedback
#1

Hi guys,

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.

https://codepen.io/steffanek/pen/QKXdMY?editors=1010

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.

#2

You’re getting a CORS request error.

Add &callback=? to your wikipedia getJSON API string.

Here is a useful thread discussing the issues surrounding the Wikipedia API:

1 Like
#3

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 ?

Pasted image1207Ă—377 23.6 KB

Im trying to add the Main Image of the Author who is given the quotation via Wikipedia API, check below :
http://codepen.io/steffanek/pen/QKXdMY

#4

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.
}
1 Like
#5

Thats amazing stuff, I was looking for something like this but I didnt know the syntax ! Thank you very much !

#6

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)");
  
  
      });
#7

I think the issue is with the url.

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.

1 Like