mediawiki apiは配列の結果を表示できません。

Question

こんにちは、あなたはすばらしい人です。JavaScriptファイルを作成して、入力フィールドの検索値に基づいてWikipediaから情報を抽出し、リンクのようなタイトルで結果を表示しようとしています。リンクをクリックして読むことができます。これまで私はMediaWiki（Wikipedia）から（JSON）形式で要求された情報を取得していますが、ページに表示することはできません。 JavaScript配列の後にエラーコードがあると思います。 私はJavaScriptで何か助けになっています、またはヒントは高く評価されます。 申し訳ありませんが、私のスクリプトは面倒ですが、私はそれをたくさん試しています。おかげさまで

  var httpRequest = false ; 
     var wikiReport; 


     function getRequestObject() { 
      try { 
       httpRequest = new XMLHttpRequest(); 
      } catch (requestError) { 
       return false; 
      } 
      return httpRequest; 
     } 

     function getWiki(evt) { 
      if (evt.preventDefault) { 
       evt.preventDefault(); 
      } else { 
       evt.returnValue = false; 
      } 
     var search = document.getElementsByTagName("input")[0].value;//("search").value; 
      if (!httpRequest) { 
       httpRequest = getRequestObject(); 
      } 
      httpRequest.abort(); 
      httpRequest.open("GET", "https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=3&generator=search&origin=*&gsrsearch=" + search , true);//("get", "StockCheck.php?t=" + entry, true); 
      //httpRequest.send(); 
      httpRequest.send(); 
      httpRequest.onreadystatechange = displayData; 
     } 

     function displayData() { 
     if(httpRequest.readyState === 4 && httpRequest.status === 200) { 
      wikiReport = JSON.parse(httpRequest.responseText);//for sunchronus request 
      //wikiReport = httpRequest.responseText;//for asynchronus request and response 
      //var wikiReport = httpRequest.responseXML;//processing XML data 
      var info = wikiReport.query; 
      var articleWiki = document.getElementsByTagName("article")[0];//creating the div array for displaying the results 
      var articleW = document.getElementById("results")[0]; 
     for(var i = 0; i < info.length; i++) 
     { 

    var testDiv = document.createElement("results"); 
    testDiv.append("<p><a href='https://en.wikipedia.org/?curid=" + query.pages[i].pageid + "' target='_blank'>" + query.info[i].title + "</a></p>"); 
    testDiv.appendChild("<p><a href='https://en.wikipedia.org/?curid=" + query.info[i].pageid + "' target='_blank'>" + query.info[i].title + "</a></p>"); 

     var newDiv = document.createElement("div"); 
     var head = document.createDocumentFragment(); 
     var newP1 = document.createElement("p"); 
     var newP2 = document.createElement("p"); 
     var newA = document.createElement("a"); 

     head.appendChild(newP1); 

     newA.innerHTML = info[i].pages; 
     newA.setAttribute("href", info[i].pages); 
     newP1.appendChild(newA); 
     newP1.className = "head"; 
     newP2.innerHTML = info[i].title; 
     newP2.className = "url"; 
     newDiv.appendChild(head); 
     newDiv.appendChild(newP2); 

     articleWiki.appendChild(newDiv); 
     } 
     } 
     } 

     // 
     function createEventListener(){ 
     var form = document.getElementsByTagName("form")[0]; 
     if (form.addEventListener) { 
      form.addEventListener("submit", getWiki, false); 
     } else if (form.attachEvent) { 
      form.attachEvent("onsubmit", getWiki); 
     } 
     } 

     //createEventListener when the page load 
     if (window.addEventListener) { 
     window.addEventListener("load", createEventListener, false); 
     } else if (window.attachEvent) { 
     window.attachEvent("onload", createEventListener); 
     } 

のMediawiki APIリンク

https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=3&generator=search&origin= * & gsrsearch =

Answer 1

あなたは、いくつかのポイントが間違っています。 1） var articleW = document.getElementById（ "results"）[0];

これは間違っています。これは、要素がElementオブジェクトへの参照か、指定されたIDを持つ要素が文書にない場合はnullを返します。ドキュメントはこちら（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById）

正解は次のとおりです。 var articleW = document.getElementById（ "results"）;

2）

var info = wikiReport.query; 
for(var i = 0; i < info.length; i++) {} 

• infoが目的です。それは配列ではない、あなたはループfor子の値を取得することはできません。
• wikiReport.queryは正しいwikiデータではありません。正しいデータはwikiReport.query.pagesである必要があります。これはあまりにも

  testDiv.appendChild("<p><a href='https://en.wikipedia.org/?curid=" + query.info[i].pageid + "' target='_blank'>" + query.info[i].title + "</a></p>"); 
  

  Node.appendChild()方法は、最後にノードを追加正しくない）

  var pages = wikiReport.query.pages 
  for(var key in pages) { 
      var el = pages[key]; 
  } 
  

  3：そして、子要素

正しい答えを得るために、ループのため、使用指定された親ノードの子リストのリストこのメソッドを使用して文字列を追加しています。これによりエラーが発生します。ノード要素にそれを変更するか、appendメソッドを使用する代わりに、私はtest.Youは下のリンクでそれを確認することができ、サンプルを作成しました

https://codepen.io/anon/pen/XRjOQQ?editors=1011