TVMaze api error

Question

I am creating a site for listing TV shows and I am using TVMaze api for it. I am beginner in working with JSON so maybe my problem is that, but here is the weird thing happening.

My table is generated with this code:

var keyword = "";
var $url = "";

$('#submit').on('click', function (e) {
    //e.preventDefault();
    keyword = $('#search').val();
    window.sessionStorage['keyword'] = keyword;
});
if (!window.sessionStorage['keyword']) {
    $url = " http://api.tvmaze.com/shows?page=1";
} else {
    keyword = window.sessionStorage['keyword'].toString();
    keyword = keyword.toLowerCase().replace(/\s/g, "");
    $url = "http://api.tvmaze.com/search/shows?q=" + keyword;
    //alert($url);
}

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var $obj = JSON.parse(this.responseText);
        for (var i = 0; i <= $obj.length - 1; i++) {
            var $item = '<div> \
                          <div>\
                              <h2>' + $obj[i].name + '</h2> \
                              <div> ' + $obj[i].rating.average + ' </div>\
                              <p>' + $obj[i].summary + '</p>\
                              <a href="#" id="' + $obj[i].id + '">Track</a>\
                          </div>\
                        </div>';
            $('.show-items-container').append($item);
        }
    }
};
//alert($url);
xmlhttp.open("GET", $url, true);
xmlhttp.send();

So first it checks if there is keyword entered in a search bar and if there isn't it sends a request to the /page=1, and if there is a keyword entered, it should print the show. But, in my case, it reads to url like it is supposed to, but nothing shows up. And if I search that link in the browser it lists the correct show.

For example if I put 'kirby' in the search bar, it reads this url -> http://api.tvmaze.com/search/shows?q=kirby , but nothing shows in the table and there are no errors in the console. If you enter that same url in the browser, it works.

Can anyone tell me what the problem is?

Answer 1

Looks like onclick you are not making the xhr request. You call xmlhttp.open and xmlhttp.send outside of the click event so nothing happens on click. Also I noticed you were accessing the wrong property it should be $obj[i].show.___ vs $obj[i].___

var keyword = "";
var $url = "";
var xmlhttp = new XMLHttpRequest();

function makeRequest() {
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // clear the current search results
      $('.show-items-container').empty();
      var $obj = JSON.parse(this.responseText);
      for (var i = 0; i <= $obj.length - 1; i++) {
        // make sure you access the correct property
        var $item = `<div>
                        <div>
                          <h2> ${$obj[i].show.name} </h2>
                          <div> ${$obj[i].show.rating.average} </div>
                          <p> ${$obj[i].show.summary} </p>
                          <a href="#" id="${$obj[i].show.id}">Track</a>
                        </div>
                      </div>`;
        $('.show-items-container').append($item);
      }
    }
  }

  // make the xhr request on click
  xmlhttp.open("GET", $url, true);
  xmlhttp.send();

}

$('#submit').on('click', function(e) {
  keyword = $('#search').val();
  $url = "https://api.tvmaze.com/search/shows?q=" + keyword;

  // call on click
  makeRequest();
});

// call on page load
makeRequest();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id='search' />

<button type="button" id='submit'>Submit </button>

<div class="show-items-container">
</div>