mediawiki api can not display the results from array

Question

Hello you wonderful people, I am trying to build JavaScript file to extract information from Wikipedia based on search value in the input field and then display the results with the title like link so the user can click the link and read about it. So far I am getting the requested information in(JSON)format from Mediawiki(Wikipedia) but I can't get it to display on the page. I think I have an error code after the JavaScript array. I'm new at JavaScript any help, or hint will be appreciated. Sorry my script is messy but I am experimenting a lot with it. Thanks.

            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 link

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

Answer 1

You are wrong some points. 1) var articleW = document.getElementById("results")[0];

This is wrong. This will return a element is a reference to an Element object, or null if an element with the specified ID is not in the document. Doc is here (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)

The correct answer should be : var articleW = document.getElementById("results");

2)

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

• The info is object . it is not array , you can't for-loop to get child value.
• wikiReport.query is not correct wiki data. The correct data should be wikiReport.query.pages. And use for-in-loop to get child element

The correct answer:

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

3) This is incorrect too

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

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. You are using the method to adds a string . This will cause error. Change it to node element or use append method instead

I have created a sample test.You can check it at this link below https://codepen.io/anon/pen/XRjOQQ?editors=1011