mediawiki api無法顯示數組中的結果

Question

你好，你是美妙的人，我試圖建立JavaScript文件，根據輸入字段中的搜索值從維基百科中提取信息，然後顯示帶有標題的結果，如鏈接，以便用戶可以點擊鏈接並閱讀它。到目前爲止，我從Mediawiki（維基百科）獲取（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。 Doc is here（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是不正確的維基數據。正確的數據應該是wikiReport.query.pages。和使用在環獲得子元素

正確答案：

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

3）這是不正確太

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

的Node.appendChild()方法添加一個節點到最後指定父節點的子項列表。您正在使用該方法添加一個字符串。這會導致錯誤。它更改爲節點元件或使用append方法代替

我已經創建了一個樣品test.You可以在此鏈接檢查它下面https://codepen.io/anon/pen/XRjOQQ?editors=1011