Question

I wish to extract the the first image within infobox – the table with the class name infobox that is on most Wikipedia pages, using Wikipedia/Mediawiki API

Here’s what I’ve tried so far –

$.getJSON("http://en.wikipedia.org/w/api.php?action=mobileview&format=json&page=mumbai&redirect=no&sections=0&prop=text&sectionprop=toclevel%7Clevel%7Cline%7Cnumber%7Cindex%7Cfromtitle%7Canchor&callback=?", function(json) { 
var wikitext = json.mobileview.sections[0].text;
var img = $(wikitext).find('img:first').attr("src");

/*
//how can i make this work?

//selector for element with multiple classes - http://stackoverflow.com/questions/1041344/jquery-multiple-class-selector
  var infoboximg = $(wikitext).find('table.infobox.geography.vcard img:first').attr("src");
console.log(infoboximg);  
*/

$('#pic').append('<img src="http://' + img + '" />');

}
);          

You can try the snippet here – http://jsbin.com/erudum/5/

How can I fix the code to grab the first image within the table having the name infobox?

Answer 1

Do you need to get the src only? why not just append the img like this

$.getJSON("http://en.wikipedia.org/w/api.php?action=mobileview&format=json&page=mumbai&redirect=no&sections=0&prop=text&sectionprop=toclevel%7Clevel%7Cline%7Cnumber%7Cindex%7Cfromtitle%7Canchor&callback=?", function(json) { 
        var wikitext = json.mobileview.sections[0].text;
        var img = $(wikitext).find('img:first');
        $('#pic').append(img);
    }
);

http://jsfiddle.net/wirey00/Kr46e/

EDIT

After looking at the return text.. it is actually an array of ELEMENTS that’s returned.. The table is the 5th element so you can get it use the .eq() method in jQuery

$.getJSON("http://en.wikipedia.org/w/api.php?action=mobileview&format=json&page=mumbai&redirect=no&sections=0&prop=text&sectionprop=toclevel%7Clevel%7Cline%7Cnumber%7Cindex%7Cfromtitle%7Canchor&callback=?", function(json) { 
        var wikitext = json.mobileview.sections[0].text;
        var img = $(wikitext).eq(4).find('img:first').attr('src');
        $('#pic').append('<img src="' + img + '"/>');
    }
);

You can do a console.log to see what I mean

console.log($(wikitext));

http://jsfiddle.net/wirey00/Jp7rn/

EDIT AGAIN

I figured out why it’s coming back as an array. The quotes in the text is throwing it off. What I would do is append the whole thing.. maybe to a hidden field or something.. then traverse it and get the img text. then remove the whole thing again. Here’s an example

$.getJSON("http://en.wikipedia.org/w/api.php?action=mobileview&format=json&page=mumbai&redirect=no&sections=0&prop=text&sectionprop=toclevel%7Clevel%7Cline%7Cnumber%7Cindex%7Cfromtitle%7Canchor&callback=?", function(json) { 
    var wikitext = json.mobileview.sections[0].text;
    $('#pic').hide().append(wikitext); // hide the div then append whole string
    var img = $('#pic').find('.infobox img:first').attr('src');// find the src
    $('#pic').show().html('<img src="' + img + '"/>'); // show and append
    }
);

http://jsfiddle.net/Jp7rn/1/