如何将视频及其描述从 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：live demo 我能够为每部电影显示视频标题，但我很难像在 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();
});

在您的脚本中，迭代视频列表并将每个视频的数据发送到函数。函数 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>

希望对您有所帮助。

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/