How can i fix javascript showing Uncaught SyntaxError: Unexpected end of input error

Question

the console throws an Uncaught SyntaxError: Unexpected end of input error. This code was taken from another question i asked. It worked at first but then i added some headers. Then i deleted the headers and now the code is throwing this error. I have also deployed the website to here. I am a beginner to API's and CORS errors

var currentQuery = "";

var inputElement = document.getElementsByClassName("anime-input")[0];
inputElement.addEventListener("input", refreshData);
inputElement.dispatchEvent(new Event("input"))

function refreshData(e) {
  //Deal with fetching delay
  currentQuery = inputElement.value;
  var thisQuery = inputElement.value;
  //Hide table, show loading
  document.getElementsByClassName("show-hide")[0].style.display = "block"
  document.getElementsByClassName("show-hide")[1].style.display = "none"

  var query = (e.target.value == "") ? query = e.target.placeholder : e.target.value;
  fetch("https://nyaaapi.herokuapp.com/nyaa/anime?query=" + query)
    .then(res => res.json())
    .then(data => {
      //Deal with fetching delay
      if (thisQuery != currentQuery) {
        return;
      }
      //Initialize column data variables
      var titles = [],
        sizes = [],
        torrents = [],
        dataSize = data.data.length;

      //Arrange the data to appropriate array
      data.data.forEach(dataPoint => {
        titles.push(dataPoint.title);
        sizes.push(dataPoint.size);
        torrents.push(dataPoint.torrent)
      });

      //Clear table
      document.getElementsByClassName("anime-data")[0].innerHTML = ""

      //Put the data in the table
      [Array(dataSize)].forEach((el, index) => {
        row = document.createElement("tr")
        var title = document.createElement("td")
        title.innerText = titles[index]
        row.appendChild(title)
        var size = document.createElement("td")
        size.innerText = sizes[index]
        row.appendChild(size)
        var downloadLink = document.createElement("td")
        downloadLink.innerText = torrents[index]
        row.appendChild(downloadLink)

        document.getElementsByClassName("anime-data")[0].appendChild(row)
      })

      //Hide loading, show table
      document.getElementsByClassName("show-hide")[0].style.display = "none"
      document.getElementsByClassName("show-hide")[1].style.display = "block"
    });

html,
body {
  margin: 0;
  padding: 4px;
  width: 100%;
  height: 100%;
}

table {
  width: 100%;
  border: 1px solid black;
  text-align: center;
}

th,
td {
  border: 1px black solid;
}

<html>

<body>
  Enter Name of Anime:
  <input class="anime-input" type="text" placeholder="Hanasaku Owari">
  <br><br>
  <span class="show-hide">Loading...</span>
  <table class="show-hide">
    <colgroup>
      <col style="width:45%;border: 1px black solid">
      <col style="width:10%;border: 1px black solid">
      <col style="width:45%;border: 1px black solid">
    </colgroup>
    <tr>
      <th style="">Title</th>
      <th style="">Size</th>
      <th style="">Torrent Download</th>
    </tr>
    <tbody class="anime-data">
      <tr>
        <td class="anime-title"></td>
        <td class="anime-download-size"></td>
        <td class="anime-download-link"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Niaz Estefaie · Accepted Answer · 2021-05-10 04:25:53Z

You didn't close your function

function refreshData(e) {
  //Deal with fetching delay
  currentQuery = inputElement.value;
  var thisQuery = inputElement.value;
  //Hide table, show loading
  document.getElementsByClassName("show-hide")[0].style.display = "block";
  document.getElementsByClassName("show-hide")[1].style.display = "none";

  var query = (e.target.value == "") ? query = e.target.placeholder : e.target.value;
  fetch("https://nyaaapi.herokuapp.com/nyaa/anime?query=" + query)
    .then(res => res.json())
    .then(data => {
      //Deal with fetching delay
      if (thisQuery != currentQuery) {
        return;
      }
      //Initialize column data variables
      var titles = [],
        sizes = [],
        torrents = [],
        dataSize = data.data.length;

      //Arrange the data to appropriate array
      data.data.forEach(dataPoint => {
        titles.push(dataPoint.title);
        sizes.push(dataPoint.size);
        torrents.push(dataPoint.torrent)
      });

      //Clear table
      document.getElementsByClassName("anime-data")[0].innerHTML = "";

      //Put the data in the table
      [Array(dataSize)].forEach((el, index) => {
        row = document.createElement("tr");
        var title = document.createElement("td");
        title.innerText = titles[index];
        row.appendChild(title);
        var size = document.createElement("td");
        size.innerText = sizes[index];
        row.appendChild(size);
        var downloadLink = document.createElement("td");
        downloadLink.innerText = torrents[index];
        row.appendChild(downloadLink);

        document.getElementsByClassName("anime-data")[0].appendChild(row);
      })

      //Hide loading, show table
      document.getElementsByClassName("show-hide")[0].style.display = "none";
      document.getElementsByClassName("show-hide")[1].style.display = "block";
    })
}

replace this code it may work for you

Collectives™ on Stack Overflow

How can i fix javascript showing Uncaught SyntaxError: Unexpected end of input error

1 Answer 1

Comments

Your Answer

Collectives™ on Stack Overflow

How can i fix javascript showing Uncaught SyntaxError: Unexpected end of input error

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related