Login/Register
How to get a short snippet of text and the main image of Wikipedia articles by API?
Asked Answered
Solved javascriptjqueryajaxwikipedia-api
A

1

9

I'm trying to create a simple clone of Wikipedia that allows the user to search for a subject, and then display 10 results that contain the article's image and a short snippet of text. I've been able to pass the user supplied search field to my .ajax() call with no problem. But now I'm unable to retrieve the images, I've read all the other posts on StackOverflow regarding this problem, but have no success. 

$(document).ready(function() {
  var input = $('input');
  var button = $('button');

  //Create varialbe to store search field
  var toSearch = '';

  //Api data:
  var searchUrl = 'https://en.wikipedia.org/w/api.php';

  //.ajax() to get articles
  var ajaxArticle = function() {
      $.ajax({
        url: searchUrl,
        dataType: 'jsonp',
        data: {
          action: 'query',
          format: 'json',
          prop: 'extracts',
          exchars: '200',
          exlimit: 'max',
          explaintext: '',
          exintro: '',
          rawcontinue: '',
          generator: 'search',
          gsrsearch: toSearch,
          gsrnamespace: '0',
          gsrlimit: '10'
        }, //End data:
        success: function(json1) {
          console.log(json1);
        }
      }); //End .ajax()
    }

  //.ajax() to get images
  var ajaxImage = function() {
      $.ajax({
        url: searchUrl,
        dataType: 'jsonp',
        data: {
          'action': 'query',
          'titles': toSearch,
          'prop': 'pageimages',
          'format': 'json'
        }, //End data:
        success: function(json2) {
          console.log(json2)
        }
      }); //End .ajax()
    }

  //Auto complete search bar
  input.autocomplete({
    source: function(request, response) {
      $.ajax({
        url: searchUrl,
        dataType: 'jsonp',
        data: {
          'action': "opensearch",
          'format': "json",
          'search': request.term
        },
        success: function(data) {
          response(data[1]);
        }
      });
    }
  }); //End auto compelete

  //Listen for click on button to store search field
  button.click(function() {
    toSearch = input.val();
    ajaxArticle();
    ajaxImage();
  }); //End click handler
})
<html>
<body>
  <head>
    <title>My Wikipedia Viewer</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
  </head>
  <section>
    <input type='text' value='' placeholder='Search for...'>
    <button>Make it so</button>
  </section>
  <section class='articles'></section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type='application/javascript' src='js/script.js'></script>
</html>

I appreciate any help that may be provided.

Affranchise answered 26/2, 2016 at 22:54 Comment(0)
U
9

You can retrieve the text and the images in one request, try this:

$(document).ready(function () {
    var articles = $('.articles');
    var input = $('input');
    var button = $('button');
    var toSearch = '';
    var searchUrl = 'https://en.wikipedia.org/w/api.php';

    var ajaxArticleData = function () {
        $.ajax({
            url: searchUrl,
            dataType: 'jsonp',
            data: {
                //main parameters
                action: 'query',
                format: 'json',

                generator: 'search',
                    //parameters for generator
                    gsrsearch: toSearch,
                    gsrnamespace: 0,
                    gsrlimit: 10,

                prop: 'extracts|pageimages',
                    //parameters for extracts
                    exchars: 200,
                    exlimit: 'max',
                    explaintext: true,
                    exintro: true,

                    //parameters for pageimages
                    piprop: 'thumbnail',
                    pilimit: 'max',
                    pithumbsize: 200
            },
            success: function (json) {
                var pages = json.query.pages;
                $.map(pages, function (page) {
                    var pageElement = $('<div>');

                    //get the article title
                    pageElement.append($('<h2>').append($('<a>').attr('href', 'http://en.wikipedia.org/wiki/' + page.title).text(page.title)));

                    //get the article image (if exists)
                    if (page.thumbnail) pageElement.append($('<img>').attr('width', 150).attr('src', page.thumbnail.source));

                    //get the article text
                    pageElement.append($('<p>').text(page.extract));

                    pageElement.append($('<hr>'));

                    articles.append(pageElement);
                });
            }
        });
    };

    input.autocomplete({
        source: function (request, response) {
            $.ajax({
                url: searchUrl,
                dataType: 'jsonp',
                data: {
                    'action': "opensearch",
                    'format': "json",
                    'search': request.term
                },
                success: function (data) {
                    response(data[1]);
                }
            });
        }
    });

    button.click(function () {
        articles.empty();
        toSearch = input.val();
        ajaxArticleData();
    });
});
<!DOCTYPE html>
<html>
<head>
    <title>My Wikipedia Viewer</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <section>
        <input type='text' value='' placeholder='Search for...'>
        <button>Search</button>
    </section>
    <section class='articles'></section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</body>
</html>
Uranous answered 27/2, 2016 at 10:29 Comment(2)
Fantastic, I can't thank you enough for this! I need to do my research on generators. – Affranchise
@Uranous I find the answer i wanted here: https://mcmap.net/q/264542/-accessing-main-picture-of-wikipedia-page-by-api "&prop=pageimages|pageterms&piprop=thumbnail&pithumbsize=600" – Stale

© 2022 - 2024 — McMap. All rights reserved.