javascript - 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= *&gsr搜索=

Answer 1

有些观点你错了。 1) var ArticleW = document.getElementById("结果")[0];

这是错误的。这将返回一个元素，该元素是对 Element 对象的引用，如果具有指定 ID 的元素不在文档中，则返回 null。文档在这里 ( https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById )

正确答案应该是: var ArticleW = document.getElementById("结果");

2)

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

• info 是 object 。它不是 array ，您不能 for 循环来获取子值。
• wikiReport.query 不是正确的 wiki 数据。正确的数据应该是 wikiReport.query.pages。并使用for-in循环获取子元素

正确答案:

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 方法代替

我已经创建了一个示例测试。您可以通过下面的链接查看它 https://codepen.io/anon/pen/XRjOQQ?editors=1011