Блог

В настоящее время создаю веб-сайт для индексации и воспроизведения фильмов, хранящихся на моем жестком диске, которые я недавно снял с DVD-дисков просто в качестве небольшого побочного проекта. У меня есть JSON-файл ‘master movie list’ со всеми необходимыми данными для каждого фильма, включая название, источник видео, источник видеопостера и жанр, который я хотел бы разрешить использовать для размещения фильма в нескольких разных жанрах.

В настоящее время проблема, с которой я сталкиваюсь, заключается в том, что при разборе сгенерированного списка жанров html не помещается в правильный идентификатор, который нравится ID на веб-странице.

Например: «жанр»: «комедия, недавнее, scifi»

Я поступил так, как думал, что должен, через getJSON и установив выходную переменную, для которой я получаю значение genre, разделил, чтобы сделать его массивом, и получил элемент, пройдя по каждому из них в цикле. Однако он не помещает его в нужное место. Приведенный выше пример по какой-то причине был бы помещен в comedy, recent, scifi, horror и несколько других, и у меня нет абсолютно никаких причин почему.

 $.getJSON('/webresource/data/movies.json', function(data) {
  console.log(data);
  var output = '';
  var ele = $('');
  $.each(data, function(key, val) {

    output  = '<div class="video_box lazy-background" video-src="'  
      val.video_src   '" video-poster-src="'  
      val.video_poster_src   '">'  
      '<h5>'   val.name   '</h5>'  
      '</div> ';

    var genres = val.genre;
    var genresarray = genres.split(',');

    for (i = 0; i < genresarray.length; i  ) {
      var genreelement = $('#'   genresarray[i]);
      genreelement.html(output);
    }
  });
});  

 [ {  "name": "a star is born", "video_src":"/files/movies/A Star Is Born/astarisborn.mp4", "video_poster_src":"https://images-na.ssl-images-amazon.com/images/I/51R-TU6VaTL.jpg", "genre":"recently,romance,drama"}] // this is an example of the json  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="genre_box">
  <h3>RECENTLY ADDED</h3>
  <div class="scroll_box" id="recently"></div>
</div>

<div class="genre_box">
  <h3>ACTION</h3>
  <div class="scroll_box" id="action"></div>
</div>

<div class="genre_box">
  <h3>COMEDY</h3>
  <div class="scroll_box" id="comedy"></div>
</div>  

Ваша output переменная добавляется и сохраняется на каждой итерации вашего $.each цикла. Что вы хотите, так это добавить в конец $("#action") , $("#comedy") и т.д. Вы должны сделать что-то в этом роде:

 $.getJSON('/webresource/data/movies.json', function(data) {
  console.log(data);
  $.each(data, function(key, val) {

    var output = '<div class="video_box lazy-background" video-src="'  
      val.video_src   '" video-poster-src="'  
      val.video_poster_src   '">'  
      '<h5>'   val.name   '</h5>'  
      '</div> ';

    var genres = val.genre;
    var genresarray = genres.split(',');

    for (var i = 0; i < genresarray.length; i  ) {
      var genreelement = $('#'   genresarray[i]);
      genreelement.append(output);
    }
  });
});