Iskandar Nareg Iskandar Nareg - 28 days ago 16
Javascript Question

Trouble with JQuery $.getJSON and Wikipedia API

So I'm trying to access the Wikipedia API for a Free Code Camp project. I tried using the standard Ajax interface, and it didn't work - I tried using .getJSON, and I still can't get it to work. The problem isn't my buttons, or the link, or the function - the button logs to the console, the link, when entered in-browser, returns JSON data, and the function is currently a console log that isn't logging. Occasionally, the screen goes completely blank.

Additionally, neither CodePen's nor my browser's console logs the "worked" message, but Stack Overflow just did. It's driving me crazy, because this is super basic.

What am I doing wrong?
The JS, CSS, and HTML are below, and this is a link to the CodePen.



//ready
$(document).ready(function() {
//jquery onclick
$("#search").on("click", function() {
var term = $("#term").val();
console.log(term);
//request
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&search=" + term + "&callback=?",
function(json) {
console.log("worked");
}); //end getJSON
}); //end onclick
}); //end docready

@import url('https://fonts.googleapis.com/css?family=Arimo');

#well{
background-color:#ededed;
}

body{
background-color:#6b6b6b;
text-align:center;
}
h1{
font-family: Times, Georgia, serif;
}

h5, form{
font-family: 'Arimo', sans-serif;
}

.result{
background-color: WHITE;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="well">
<header>
<h1>Wikipedia Viewer</h1>
</header>

<body>
<br>
<div id="select">
<h5><a href="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" target="_blank">Click for a random article</a></h5>
<br>
<form>
<input type="text" id="term" name="search" placeholder="What article?">
<button id="search">Search</button>
</form>
<br>
<h5>Or search above for a specific one</h5>
</div>
<ul id="results">

</ul>
</body>
</div>




Answer

UPDATE: Sorry it was browser cache issue as mentioned in a comment that wasn't my thought.

it was just that Firefox was being weird and Chrome had cached my page.

Parse wikipedia response array json you called in callback.

  1. json[0] is search term.
  2. json[1] array are titles.
  3. json[2] array are descriptions.
  4. json[3] array are links.

I misunderstand why downvote!

Here is full working example.

$(document).ready(function() {
  $("#search").on("click", function() {
    var term = $("#term").val();
    //request
    $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&search=" + encodeURIComponent(term) + "&callback=?",
      function(json) {
        $("#results").html("");
        $("#results").append("<span>" + json[1].length + " Search results for \"" + term + "\"</span>");
        for (var i = 0; i < json[1].length; i++) {
          $("#results").append("<li><h3><a href='" + json[3][i] + "'>" + json[1][i] + "</a></h3><p>" + json[2][i] + "</p></li>");
        }
      }); //end getJSON
  }); //end onclick
}); //end docready
@import url('https://fonts.googleapis.com/css?family=Arimo');
 #well {
  background-color: #ededed;
}
body {
  background-color: #6b6b6b;
  text-align: center;
}
h1 {
  font-family: Times, Georgia, serif;
}
h5,
form {
  font-family: 'Arimo', sans-serif;
}
.result {
  background-color: WHITE;
}
li {
  list-style: none;
  text-align: left;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="well">
  <header>
    <h1>Wikipedia Viewer</h1>
  </header>

  <body>
    <br>
    <div id="select">
      <h5><a href="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" target="_blank">Click for a random article</a></h5>
      <br>
      <form>
        <input type="text" id="term" name="search" placeholder="What article?">
        <button id="search">Search</button>
      </form>
      <br>
      <h5>Or search above for a specific one</h5>
    </div>
    <ul id="results">
    </ul>
  </body>
</div>