动态追加 html 列表

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下载成功，"ok"打印了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>');
});
}
});
}

Answer 2

我在添加 html 之前调用了 javascript。我只是在最后移动了javascript，它就可以工作了