WikipediaのAPI検索freecodecampを混乱させた

Question

単語を入力してボタンをクリックするコードを書き込もうとしています（ "return"ボタンを押してコードを後で追加します）。あなたが入力した単語に関連しています。それぞれの結果にはタイトル/ URLと説明が含まれます（基本的にはページの最初の文章です）。私はAPI Sandboxを使って私が必要とするものを見つけようとしましたが、私が得た結果は私が探していたものではありませんでした。私はまだlist=searchとgenerator=searchの違いを得ていません。両方とも結果を返すからです。しかし、list=searchを使って、jsonのタイトルをdata.search [i] .titleとし、説明文（？）をdata.search [i] .snippetとすると、より多くの成功を収めたようです。しかし、私はgenerator=searchを使用して情報を呼び出すことができません。 MediaWiki APIのドキュメントはあまりにも混乱していました...基本的には、generator=searchを使用した場合にのみ発生すると思われる情報の抽出を呼び出したいと思います。しかし、タイトルをdata.pages[i].title、説明をdata.pages[i].extractと呼ぶときにエラーが発生しました。

は、ここに私のコードです：それはあなたがオプションgenerator=allpages、generator=linksを持ってオプションではありませんので、

$(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', 
 
\t  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からデータにアクセスすることでした。私はlist=searchの1回と比較して2回内側に入る必要があることを忘れていました。

私がやらなければならないことは、私のjavascriptの領域にこのコードを追加することです：

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

Answer 2

generator=searchは動作しません。ジェネレータは、検索用語のすべてのページまたはすべてのリンクを提供します。 searchという用語は、実際にはgapfrom=で使用されます。 HERESに作業例：

{ 
    "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 3

私は、自動的にあなたのgetWords（）関数を実行する "の提出" を追加するフォームを変更しました。私はまた、リフレッシュを避けるためにjavascript：void（）にアクションを変更しました。私はgetWord（）を変更し、それがそのままフォームonsubmitからアクセスできないので、document.ready関数から取り出しました。さて、コードは機能しているはずです。それ以上の助けが必要な場合は、ただコメントしてください。

<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>