对Wikipedia API搜索FreeCodecamp感到困惑

Question

I'm trying to write the code in which one enter a word, click the button (I'll add the code later for submitting by pressing "return" button), and you get 10 results related to the word you enter. Each result will have a title/url and a description (basically, the first sentence in the page, I think?). I tried to use API Sandbox to figure out what I need but the results I got wasn't what I was looking for. I also still don't get the difference between list=search and generator=search since they both return the results. However, it seems that I got more success when I use list=search when I call the title in json as data.search[i].title and description(?) as data.search[i].snippet . However, I'm unable to call the info when I use generator=search . The documentation for MediaWiki API was way too confusing... Basically, I wanted to call the extract of the info which seems to only happen if I use generator=search . However, I got an error when I tried to call the title as data.pages[i].title and description as data.pages[i].extract .

Here's my code:

 $(document).ready(function() { function getWord() { var keyword = $("#searchkeyword").val(); $.ajax({ url: "https://en.wikipedia.org/w/api.php?", type: 'GET', dataType: "jsonp", data: { action: 'query', format: 'json', prop: 'extracts', list: 'search', srsearch: keyword, exsentences: '1', exlimit: '10', exintro: '1', explaintext: '1' }, success: function(data) { console.log(data); $("#articlearea").empty(); for(var i = 0; i < 10; i++) { $("#articlearea").append('<div class="articlebox">' + data.query.search[i].title + '<br>' + data.query.search[i].extract + '</div>'); } } }); }; $("#submitbtn").on("click", getWord); }); 

 @import url('https://fonts.googleapis.com/css?family=Amiko:400,600'); body { position: relative; font-family: 'Amiko', sans-serif; } html, body{ height:100%; margin: 0; background-color: #40e0d0; } .wrapper { text-align: center; position: relative; } .container { width: 75%; margin: 30px auto 0; } .container a { color: #ffffff; font-size: 1.1em; text-decoration: none; margin-bottom: 10px; display: block; } input { border: 1px solid #ffffff; border-radius: 4px; padding: 5px 8px; font-size: 1.3em; } #submitbtn { position: relative; z-index: 1; left: -32px; top: -2px; color: #7B7B7B; cursor:pointer; width: 0; } .fa-search { font-size: 1.3em; } 

 <div class="wrapper"> <div class="container"> <a id="randomlink" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random Wikipedia article</a> <form> <input id="searchkeyword" type="text" placeholder="Search Wikipedia" /> <i id="submitbtn" class="fa fa-search"></i> </form> <div id="articlearea"></div> </div> </div> 

Answer 1

generator=search won't work because that isn't an option you have the options generator=allpages , generator=links . A generator gives you either all pages of a search term or all the links. The search term is actually used with gapfrom= . Heres a working example:

{
    "action": "query",
    "format": "json",
    "prop": "links|categories",
    "generator": "allpages",
    "gapfrom": "Ba",
    "gaplimit": "3"
}

 $(document).ready(function() { function getWord() { var keyword = $("#searchkeyword").val(); $.ajax({ url: "https://en.wikipedia.org/w/api.php?", type: 'GET', dataType: "jsonp", data: { action: 'query', format: 'json', prop: 'info', generator: 'allpages', inprop: 'url', gapfrom: keyword, gaplimit: "3" }, success: function(data) { var pages = Object.keys(data.query.pages); $("#articlearea").empty(); pages.forEach(page => { $("#articlearea").append('<div class="articlebox">' + JSON.stringify(data.query.pages[page].title) + '<br>' + JSON.stringify(data.query.pages[page].canonicalurl) + '</div>'); }) } }); }; $("#submitbtn").on("click", getWord); }); 

 @import url('https://fonts.googleapis.com/css?family=Amiko:400,600'); body { position: relative; font-family: 'Amiko', sans-serif; } html, body { height: 100%; margin: 0; background-color: #40e0d0; } .wrapper { text-align: center; position: relative; } .container { width: 75%; margin: 30px auto 0; } .container a { color: #ffffff; font-size: 1.1em; text-decoration: none; margin-bottom: 10px; display: block; } input { border: 1px solid #ffffff; border-radius: 4px; padding: 5px 8px; font-size: 1.3em; } #submitbtn { position: relative; z-index: 1; left: -32px; top: -2px; color: #7B7B7B; cursor: pointer; width: 0; } .fa-search { font-size: 1.3em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="container"> <a id="randomlink" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random Wikipedia article</a> <form> <input id="searchkeyword" type="text" placeholder="Search Wikipedia" /> <button id="submitbtn" class="fa fa-search"></button> </form> <div id="articlearea"></div> </div> </div> 

Answer 2

I changed the form to add a "on submit" to automatically run your getWords() function. I also changed the action to javascript:void() to avoid a refresh. I also changed your getWord() and took it out of the document.ready function because it's not accessible form the form "onsubmit" as it was. Now, the code should be functioning. If you need any more help, just comment.

<div class="wrapper">
<div class="container">
<a id="randomlink" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random Wikipedia article</a>
<form action="javascript:void(0)" onsubmit="getWord()">
  <input id="searchkeyword" type="text" placeholder="Search Wikipedia" />
  <i id="submitbtn" class="fa fa-search"></i>
</form>
<div id="articlearea"></div>
</div>
</div>


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

<script type="text/javascript">

function getWord() {

var keyword = $("#searchkeyword").val();

$.ajax({
  url: "https://en.wikipedia.org/w/api.php?",
  type: 'GET',
  dataType: "jsonp",
  data: {
    action: 'query',
    format: 'json',
    prop: 'extracts',
    list: 'search',
    srsearch: keyword,
    exsentences: '1',
    exlimit: '10',
    exintro: '1',
      explaintext: '1'
  },
  success: function(data) {

  console.log(data);
   $("#articlearea").empty();

  for(var i = 0; i < 10; i++) {
      $("#articlearea").append('<div class="articlebox">' + data.query.search[i].title +  '</div>');
  }


  }
});
};

$("#submitbtn").on("click", getWord);

</script>

Answer 3

Actually, what I was asking was to access the data from generator=search . I forgot that I need to go inside two times for that compared to one time for list=search .

All I need to do is to add this code to my javascript area:

var pages = data.query.pages;

        for(var page in pages) {
          $("#articlearea").append('<div class="articlebox"><a target="_blank" href="' + pages[page].fullurl + '"><div class="articlelink"><h2>' + pages[page].title + '</h2>' + pages[page].extract + '</div></a></div>');