CODEWITHSUNDEEP
javascriptjqueryhtmlcsswikipedia-api
aks
aks

Reputation: 526

Unable to get data from Wikipedia API

I am working on a 'Wikipedia Viewer' project, where you enter a search term and see a list of Wikipedia search results, but it is far from complete.

Until now I have just written the code to display the first search term. But it doesn't work.

My HTML:

<div class="container-fluid">

<div class="searchAndButtons">
  
<input type="text" id="search">
  <button class="btn" id="searchBut">Search</button>
   <form action="https://en.wikipedia.org/wiki/Special:Random"><button class="btn">Random Wiki Article</button>
  </form>
  </div>
  <div class="searchResults">
    </div>
  
  
  </div>

My CSS:

.container-fluid{
  padding:5%;
}
.searchAndButtons{
  text-align:center;
}

My Javascript:

$(document).ready(function(){
  $("#searchBut").on("click",function(){//this is click handler
   var searchTerm=document.getElementById("#search").value;
    searchTerm=searchTerm.replace(/\s/g,"+");
    
    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1",function(json){
       $(".searchResults").html(JSON.stringify(json));

        });
    });
  });

Where am I going wrong? When I run the code in Codepen and check the console, it shows an error "TypeError: document.getElementById(...) is null". My project on codepen - link

Upvotes: 0

Views: 145

Answers (1)

Smit
Smit

Reputation: 2138

$(document).ready(function(){
  $("#searchBut").on("click",function(){//this is click handler
   var searchTerm=document.getElementById("search").value;
    searchTerm=searchTerm.replace(/\s/g,"+");

    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1",function(json){
       $(".searchResults").html(JSON.stringify(json));

        });
    });
  });

Update your JS code with this. id gets value by 'search' not '#search'

UPDATE: To add headers you can do the following

 $(document).ready(function(){
      $("#searchBut").on("click",function(){//this is click handler
       var searchTerm=document.getElementById("search").value;
        searchTerm=searchTerm.replace(/\s/g,"+");



    $.ajax({
              url: 'http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1', //your request URL
              type: 'GET',
              dataType: 'json',
              success: function() { alert('hello!'); },
              error: function() { alert('boo!'); },
              beforeSend: setHeader
            });
          });

          function setHeader(xhr) {
            xhr.setRequestHeader('securityCode', 'Foo'); //your header key and value
          }

        });
      });

Upvotes: 1

Related Questions