JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="insertTest"></div>

JavaScript

var wikipediaHTMLResult = function (data) {
    var readData = $('<div>' + data.parse.text["*"] + '</div>');

    // handle redirects
    var redirect = readData.find('li:contains("REDIRECT") a').text();
    if (redirect !== '') {
        callWikipediaAPI(redirect);
        return;
    }

    var box = readData.find('.infobox');

    var binomialName = box.find('.binomial').text();
    var fishName = box.find('th').first().text();
    var imageURL = null;

    // Check if page has images
    if (data.parse.images.length >= 1) {
        imageURL = box.find('img').first().attr('src');
    }

    $('#insertTest').append('<div><img src="' + imageURL + '"/>' + fishName + ' <i>(' + binomialName + ')</i></div>');
};

function callWikipediaAPI(wikipediaPage) {
    // http://www.mediawiki.org/wiki/API:Parsing_wikitext#parse
    $.getJSON('http://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?', {
        page: wikipediaPage,
        prop: 'text|images',
        uselang: 'en'
    }, wikipediaHTMLResult);

    $.getJSON("http://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
        page: wikipediaPage,
        prop: "text"
    }, wikipediaHTMLResult);

    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&callback=?", {
        titles: wikipediaPage,
        prop: "images"
    }, wikipediaImageResult);

    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&callback=?", {
        titles: wikipediaPage,
        prop: "revisions",
        rvprop: "content"
    }, wikipediaPageResult);


}

callWikipediaAPI('Ohio');