Как добавить видео и его описание от Json к элементам DOM в javascript?

Question

У меня есть простая боковая панель, на которой я хочу отображать несколько видео из json, сейчас я просто хочу показать заголовок и видео из json примерно так:

Вот то, что у меня есть.

<ul class="sidebar"> 
  <li>
  <h1 class="title"></h1>
  <video id="video_list" src=""></video>
  </li>
</ul>

Вот javascript

$(function() {
    var movies = [{
            "title": "travel",
            "left": 201,
            "top": 209,
            "movieid": "10",
            "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
            "buttons": [{
                "left": 81,
                "top": 51,
                "start_time": 1,
                "end_time": 2,
                "buttonid": "10_1",
                "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
            }]
        },
        {
            "title": "ecommerce",
            "movieid": "20",
            "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
            "buttons": [{
                "left": 0,
                "top": 0,
                "start_time": 1,
                "end_time": 2,
                "width": '200',
                "height": '60',
                "buttonid": "20_1",
            }]
        },

    ];


    function getVideoList() {
        var title = $('.title');
        var videoID = $('.video_list');
        $.each(movies, function(index, dataValue) {
            var movie_title = $("h1", {
                value: dataValue.movieid
            }).html(dataValue.title).appendTo(title);

            var movie_video = $("#video_list", {

            }).html(dataValue.movie_url).appendTo(videoID);
        });

    }

    getVideoList();


});

Вот jsfiffle: live demo Я естьЯ могу отображать заголовки видео для каждого фильма, но я изо всех сил пытаюсь отобразить как заголовок, так и соответствующее видео, как в json: (

Что я должен изменить, чтобы получить то, что я хочу ???

Answer 1

Вы должны создать динамически новый элемент для каждого элемента в списке.

Javascript

var movies = [{
    "title": "travel",
    "url": "http://techslides.com/demos/sample-videos/small.mp4"
}, {
    "title": "ecommerce",
  "url": "http://techslides.com/demos/sample-videos/small.mp4"
}];

var sidebar = $('.sidebar');

movies.forEach(function(movie) {
    sidebar.append('<li><h1>' + movie.title + '</h1><video src="' + movie.url + '"></video></li>');
});

HTML

<ul class="sidebar"></ul>

Рабочая демонстрация: https://jsfiddle.net/omg0zkct/3/

Answer 2

Ваш цикл не определяет каждый элемент.Если вы хотите <li> для каждого заголовка и видео, вам нужно сделать что-то другое.Попробуйте создать функцию, которая создает шаблон для каждого контейнера.

Рабочий пример: https://jsfiddle.net/Twisty/e2q4kd13/12/

HTML

<ul class="sidebar">
</ul>

JavaScript

$(function() {
  var movies = [{
      "title": "travel",
      "left": 201,
      "top": 209,
      "movieid": "10",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 81,
        "top": 51,
        "start_time": 1,
        "end_time": 2,
        "buttonid": "10_1",
        "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
      }]
    },
    {
      "title": "ecommerce",
      "movieid": "20",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 0,
        "top": 0,
        "start_time": 1,
        "end_time": 2,
        "width": '200',
        "height": '60',
        "buttonid": "20_1",
      }]
    }
  ];

  function formatTitle(t) {
    var nt = t[0].toUpperCase();
    nt += t.slice(1);
    return nt;
  }

  function makeListItem(v, p) {
    var li = $("<li>");
    var title = $("<h1>", {
      class: "title",
      for: "video_" + v.movieid
    }).html(formatTitle(v.title)).appendTo(li);
    var vObj = $("<video>", {
      id: "video_" + v.movieid,
      src: v.movie_url
    }).appendTo(li);
    li.appendTo(p);
  }

  function getVideoList() {
    $.each(movies, function(index, dataValue) {
      makeListItem(dataValue, $(".sidebar"));
    });
  }

  getVideoList();
});

В вашем скрипте список видео повторяется, и данные для каждого видео отправляются в функцию.Функция thenb создает новый <li> для каждого видео.Он будет содержать элемент <h1> для заголовка и элемент <video>.Затем все это добавляется в контейнер списка.

Результирующий HTML

<ul class="sidebar">
  <li>
    <h1 class="title" for="video_10">Travel</h1>
    <video id="video_10" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </li>
  <li>
    <h1 class="title" for="video_20">Ecommerce</h1>
    <video id="video_20" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </li>
</ul>

Надеюсь, что это поможет.