Question

这是我的HTML代码

  <div class="col-lg-12">
    <div class="card">
      <div class="card-header">
        Playlist
      </div>
      <div class="card-body">
        <ul id="playList">
        </ul>
      </div>
    </div>
  </div>
</div>

我尝试使用此代码

请求JSON文件并动态添加列表到html

function loadVideoList() {
  const playListContainer = $('#playList');
  $.getJSON('http://myserver.com/rest/78', function( res ) {
    const self = this;
    if(this.videoList !== res){
      $('#playList').empty();
      this.videoList = res;
      res.videos.forEach((item) => {
       console.log('ok');
        playListContainer.append('<li class="playlist-item"><span class="playlist-item-link" uri="' + item.name + '">' + item.tcsd + '</span></li>');
      });
    }
    });

json下载成功，“好”＆＃39;打印n次，但列表没有出现在html上

修改这是jsfiddle，可以重现问题

Answer 1

因为你没有提供小提琴，所以很难帮助你。但通常，使用ES6箭头函数进行词法绑定。我看到你试图通过将其分配给一个名为self的变量来模仿它，但也许使用self而不是这个是一个好主意。我想，因为你在代码块中使用它，它引用了一个未定义的对象，导致没有打印的html。顺便说一下你提供的功能有缺失}，所以我添加了一个。

试试这个：

function loadVideoList() {
  let playListContainer = $('#playList');
  $.getJSON('http://myserver.com/rest/78', res => {
    if(this.videoList !== res){
      $('#playList').empty();
      this.videoList = res;
      res.videos.forEach((item) => {
       console.log('ok');
        playListContainer.append('<li class="playlist-item"><span class="playlist-item-link" uri="' + item.name + '">' + item.tcsd + '</span></li>');
      });
    }
    });
}

动态添加html列表

1 个答案: