Я пытаюсь извлечь данные из файла json и отобразить их в виде таблицы на моей веб-странице. Файл JSON динамически обновляется с данными о фильмах из API. Функция, которую я сейчас использую, выдает синтаксическую ошибку о необходимости имени.

Я попытался назвать функцию, но пока ничего не получалось. Я новичок в веб-разработке, поэтому, если это очевидный ответ, извините.

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Furby</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
  $(function() {
  var table = document.getElementById('userdata');
  for(var i = table.rows.length - 1; i > 0; i--)
  {
    table.deleteRow(i);
  }
  $.getJSON('static/movies.json', function(data) {
    $.each(data.movie, function(i, f) {
      var url = "https://image.tmdb.org/t/p/w92/" + f.url;
      var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");
      document.getElementById('url_img').src = url;
      document.getElementById('url_img').id = url;
    });
  });
});
</script>
</head>
<body id="top">
  <div id="pageintro" class="hoc clear">
    <!-- ################################################################################################ -->
    <div class="flexslider basicslider">
      <ul class="slides">
        <li>
          <article>
            <h3 class="heading">Find A Movie</h3>
            <p>Search from thousands of online movies!</p>
            <footer>
              <form class="group" method="post" action="search" onsubmit="function();">
                <fieldset>
                  <legend>Search:</legend>
                  <input type="text" value="" placeholder="Search Here&hellip;" name="search">
                  <button class="fa fa-sign-in" type="submit" title="Submit"><em>Submit</em></button>
                </fieldset>
              </form>
            </footer>
          </article>
          <div class="wrapper">
            <div class="profile">
              <table id= "userdata" border="2">
                <thead>
                  <th>Title</th>
                  <th>Cover</th>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- ################################################################################################ -->
  </div>
  <!-- ################################################################################################ -->
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>

Приведенный ниже код обновит мою таблицу с названиями фильмов и изображениями один раз, но мне придется сделать полное обновление страницы, чтобы обновить ее. Я предполагаю, что это ошибка имени, которая не позволяет запускать этот код каждый раз, когда я ищу фильм.

enter image description here

РЕДАКТИРОВАТЬ: Добавлен более соответствующий код. Извините, это мой первый раз.

0
Rollick Boon 12 Апр 2019 в 00:58

2 ответа

Лучший ответ

Удалите встроенный прослушиватель событий из формы.

<form class="group" method="post" action="search">

Назовите свою функцию

function performSearch () {
  var table = document.getElementById('userdata');
  for (var i = table.rows.length - 1; i > 0; i--) {
    table.deleteRow(i);
  }
  $.getJSON('static/movies.json', function(data) {
    $.each(data.movie, function(i, f) {
      var url = "https://image.tmdb.org/t/p/w92/" + f.url;
      var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");
      document.getElementById('url_img').src = url;
      document.getElementById('url_img').id = url;
    });
  });
}

Вызовите свою функцию при загрузке страницы.

$(function(){
    performSearch();
});

И настроить форму для выполнения поиска при отправке.

$(function(){
    performSearch();

    $('.group[action="search"]').on('submit', function(e){
        e.preventDefault();
        performSearch();
    });
});
1
Taplar 11 Апр 2019 в 22:21

1) У вас 2 jQuery Lib, что не так, вам нужна только одна и проверьте версии

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
. . . 
<script src="static/layout/scripts/jquery.min.js"></script>

2) ваша HTML-таблица недействительна: вы забыли разместить <tr> .... </tr>

  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Cover</th>
      </tr>
    </thead>
    <tbody  id="userdata-tbody"></tbody>
  </table>

Я также помещаю id="userdata-tbody" в <tbody>, в противном случае вы также удаляете строку <thead>

Поэтому поместите вашу библиотеку jQuery перед кодом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Furby</title>
  <link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
  <script src="static/layout/scripts/jquery.min.js"></script>
  <script src="static/layout/scripts/jquery.backtotop.js"></script>
  <script src="static/layout/scripts/jquery.mobilemenu.js"></script>
  <script src="static/layout/scripts/jquery.flexslider-min.js"></script>
  <script>
      $(function () {
        var tableUserData = document.getElementById('userdata-tbody');
...

        for(var i = tableUserData.rows.length; i--;)
        {
          tableUserData.deleteRow(i);
        }  
  ...

      });
  </script>
</head>

<body>
...
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Cover</th>
      </tr>
    </thead>
    <tbody  id="userdata-tbody"></tbody>
  </table>
...

</body>
</html>
0
Mister Jojo 11 Апр 2019 в 23:02