从导入的JSON文件创建列表

Create a list from imported JSON file

本文关键字：文件创建 列表 JSON 导入      更新时间：2023-09-26

我试图从导入的JSON文件创建一个动态列表，但不断收到错误"XMLHttpRequest无法加载。跨源请求只支持协议方案：http、data、chrome、chrome扩展、https、chrome延伸资源。"但该文件不加载。有人能帮忙提示一下吗。Thx！

这是我的js文件

$.getJSON( "recordingList.json", function( data ) {
    var values = [];
    for (var i = 1; i <= values.length; i++) {
        var value = values[i];
        var element = $($('#template').html());
        element.find('.date').html(value.date);
        element.find('.lan').html(value.lan);
        element.find('.topic').html(value.topic);
        element.find('.speaker').html(value.speaker);
        element.find('.play').attr('href', value.play);
        element.find('.download').attr('href', value.link);
        $('.list').append(element);
    };
});

HTML文件

<ul class="list">
    <script type = "text/template" id="template">
    <li class='list-item'>
    <span class='date'></span>
    <span class='lan'></span>
    <span class='topic'></span>
    <span class='speaker'></span>
    <a class ='play' title='Listen' href=""><i class='fa fa-play-circle-o'></i></a>
    <a class ='download' title='Download' href=""><i class='fa fa-download'></i></a>
    </li>
    </script>
</ul>

将您的URL更改为指向文件记录List.json 的正确URL

之后，为了将数据附加到列表中，您可以使用简单的字符串串联，然后将字符串附加到<ul> 中

$.getJSON( "whatever/recordingList.json", function( data ) {
for (var i = 1; i <= data.length; i++) {
  var value = data[i];
  _html = "<li class='list-item'>"
    +"<span class='date'>"+value.date+"</span>"
    +"<span class='lan'>"+value.lan+"</span>"
    +"<span class='topic'>"+value.topic+"</span>"
    +"<span class='speaker'>"+value.speaker+"</span>"
    +"<a class ='play' title='Listen' href='"+value.play+"'><i class='fa fa-play-circle-o'></i></a>"
    +"<a class ='download' title='Download' href='"+value.link+"'><i class='fa fa-download'></i></a>"
    +"</li>";
    $('.list').append(_html);
    }
});
相关文章：