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.

Answer 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.

Answer 2

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>

Answer 3

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.