title: Different outputs for the same code with ajax.Why?
body: <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
  
        &lt;title&gt;Book Library&lt;/title&gt;
        &lt;link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous"/&gt;
      &lt;/head&gt;
  
      &lt;body
        style=" font-family:Arial, Helvetica, sans-serif" &gt;
        &lt;div class="container"&gt;
          &lt;h1
            class="text-center"
            style=" font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 50px;"&gt;
            Book Library
          &lt;/h1&gt;
          &lt;div style="height: 40px;"&gt;
            &lt;input class=" w-75 h-100 pl-2  border border-primary rounded" type="text" name="letter"  id="letter" placeholder="Ex. English"/&gt;
            &lt;button class="btn btn-primary btn-lg" id="search"&gt;search&lt;/button&gt;
          &lt;/div&gt;
          &lt;br /&gt;
  
  
        &lt;/div&gt;
        &lt;script
          src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
          crossorigin="anonymous"
        &gt;&lt;/script&gt;
        &lt;script&gt;
  </code></pre>
  
  <p>check this part of code:</p>
  
  <pre class="lang-html prettyprint-override"><code>          var books = [];
  $.ajax({
  url:
      "https://raw.githubusercontent.com/attainu/attainu-eagle/master/coding-challenges/week-5/day-3/books.json",
  datatype: "json",
  success: function(data) {
      data = JSON.parse(data);
     for(var i =0; i&lt;data.length; i++){
         books.push(data[i]);
         }
  }
  });
  
  **console.log(books)**;
  console.log(typeof books);
  var j = books[0];
     console.log(j);
  
  $("#search").on("click", search); 
  function search() {
  
  
  var j = **books**;
    **console.log(j);**
     console.log(**typeof** j);
  
  
  }
        &lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>