Блог

 $("#searchMovieBtn").click(() => {
const movieSource = $("#movie-template").html();
const movieList = Handlebars.compile(movieSource);
const movieSearch = $("#addMovie").val();
console.log(movieSearch);
queryURL = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}amp;language=en-USamp;query=${movieSearch}amp;page=1amp;include_adult=false`;
$.ajax({
  url: queryURL,
  method: "GET"
}).then(response => {
  console.log(response);
  const results = response.results;
  const data = { movies: [] };
  for (let i = 0; i < results.length; i  ) {
    const currentTitle = {
      title: results[i].title,
      release_date: results[i].release_date
    };
    data.movies.push(currentTitle);
  }
  console.log(data);
  $("#placeholder").html(
    movieList({
      data: data
    })
  );
});
});
});
 

это моя функция, чтобы вызвать его

                 <div id="placeholder"></div>
            <script type="text/x-handlebars-template" id="movie-template">
            <ul class="list-group">
                {{#each movies}}
                {{#each this}}
              <li class="list-group-item text-dark" id="MovieTitle">{{title}}
                <span>
                  (<span id="MovieYear">{{release_date}}</span>)
                  <span>
                    <button class="btn btn-warning text-light btn-sm" id="addMovieBtn">Add to watchlist</button>
                  </span>
                </span>
              </li>
              {{/each}}
              {{/each}}
            </ul>
            </script>
 

И во что это превращается!
Я не спал всю ночь и просто не могу понять, что с ним происходит! Клянусь, я посмотрел вверх и вниз и все еще не могу найти правильный метод для использования, это сводит меня с ума! В любом случае, спасибо за помощь заранее, я уверен, что это было что-то очень простое, что я много просматривал.

В вашем решении есть несколько ошибок.

Во-первых, вы должны понимать контекстный объект, который вы передаете своему шаблону. Его форма выглядит примерно так:

 {
  data: {
    movies: [
      {
        title: "Movie Title",
        release_date: "Year"
      }
    ]
  }
}
 

Обратите внимание, что первым ключом в объекте является data . Однако в вашем шаблоне у вас нет ссылки на данные, но вы пытаетесь получить доступ movies напрямую, фактически пропуская ссылку. Учитывая эти данные, первый #each в вашем шаблоне необходимо будет обновить до:
{{#each data.movies}}

Ваша вторая проблема — это ваша вторая #each проблема в вашем шаблоне. Это #each повторяет каждое свойство каждого фильма в movies массиве. Поэтому, когда вы ссылаетесь на свойство, подобное {{title}} этому блоку, полный путь вашей ссылки выглядит примерно так data.movies[i].title.title . Там есть дополнительный «.title», потому что вы находитесь не в контексте фильма, а в одном из его свойств ( title в данном случае).

Чтобы исправить это, просто удалите второй #each .

Я создал скрипку для вашей справки.

В качестве дополнительного примечания: я бы не стал включать идентификаторы статических элементов внутри цикла. Это означает, что у вас будут повторяющиеся идентификаторы в ваших выходных данных, и это недопустимый HTML.