如何将视频及其描述从Json附加到javascript中的DOM元素？

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： 现场演示我能够显示每部电影的视频标题，但是我正努力显示json和相应的视频，如json :(

我应该改变以获得我想要的东西吗？？？

Answer 1

您的循环未定义每个元素。 如果每个标题和视频都需要一个<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();
});

在脚本中，将迭代视频列表，并将每个视频的数据发送到该函数。 然后，函数<li>为每个视频创建一个新的<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>

希望能有所帮助。

Answer 2

您必须为列表中的每个项目动态创建新元素。

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/