extract an URL from a JSON response of wikipedia api

Question

I need to extract the URL of an image from a JSON response (maybe I could put it in a variable).

I read this page on the MediaWiki API help

I follow this example to get the information about images on a page:

https://commons.wikimedia.org/w/api.php?action=query&prop=pageimages&titles=Albert%20Einstein&pithumbsize=100

that return this JSON:

{
"batchcomplete": "",
"query": {
    "pages": {
        "2061": {
            "pageid": 2061,
            "ns": 0,
            "title": "Albert Einstein",
            "thumbnail": {
                "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/75px-Albert_Einstein_Head.jpg",
                "width": 75,
                "height": 100
            },
            "pageimage": "Albert_Einstein_Head.jpg"
        }
    }
}

In which way can I extract the URL of the image?

I tried this:

$.ajax({
    type:"get",
    url:"https://commons.wikimedia.org/w/api.php?action=query&prop=pageimages&titles=Albert%20Einstein&pithumbsize=100&format=json",
    dataType:"jsonp",
    contentType:"application/json; charset=utf-8",
    success: function(data) {
        var urlImage = data.query.pages.2061.thumbnail.source;
        var stgurl = JSON.stringify(urlImage);
        alert(stg);
    }
})

but doesn't work.

What do you mean by "doesn't work"? What is going on? Did you notice that you misspelled the variable `urlImage` in the line `JSON.stringify(urlimage);`? — louisfischer, Oct 08 '17 at 09:56

Nicolas P. · Answer 1 · 2017-10-08T10:05:53.193

-1

Yes, it doesn't work because this url: https://commons.wikimedia.org/w/api.php?action=query&prop=pageimages&titles=Albert%20Einstein&pithumbsize=100 doesn't return JSON but HTML. If you want the JSON representation, you need to append &format=json to your url.

edited Oct 08 '17 at 10:05

answered Oct 08 '17 at 09:58

Nicolas P.

581
1
4
15

Thank you, I add '&format=json' but in the variable seem that there aren't anything. – Jeek Oct 08 '17 at 10:30

score -1 · Answer 2 · answered Oct 08 '17 at 11:12

Change data.query.pages.2061.thumbnail.source to data.query.pages["2061"].thumbnail.source as you can't use numbers in a dot notation.

And also the alert; change stg to stgurl

$.ajax({
    type:"get",
    url:"https://commons.wikimedia.org/w/api.php?action=query&prop=pageimages&titles=Albert%20Einstein&pithumbsize=100&format=json",
    dataType:"jsonp",
    contentType:"application/json; charset=utf-8",
    success: function(data) {
        var urlImage = data.query.pages["2061"].thumbnail.source;
        //var stgurl = JSON.stringify(urlImage); - unnecessary JSON.stringify
        var stgurl = urlImage;
        alert(stgurl);
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thank you for your answer, but my code can't show the alert. I think that pages is not an array, but I don't know in which way I can access to it. — Jeek, Oct 08 '17 at 11:43
forgive me but I do not know how it could happen, I didn't do it. — Jeek, Nov 05 '17 at 14:35

score -1 · Answer 3 · answered Oct 18 '17 at 20:49

I tried to use the solution in this post:

iterating through json object javascript

Use the recursion in this way:

function walk(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var val = obj[key];
      console.log(val);
      walk(val);
    }
  }
}
walk(obj);

it seems to work.

extract an URL from a JSON response of wikipedia api

3 Answers3