Confused about Wikipedia api search 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

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>');