Javascript 如何使用jquery mobile动态创建JSON列表

我知道这是一个反复出现的问题。但我正在拼命地努力让它工作。我让它工作，并在改进过程中意外删除了它。有人能指出我哪里出了问题吗？我知道这将是显而易见的事情，但我只是在兜圈子

我有以下jquery移动页面-data role=“page”id=“catalog”

---

请告诉我我哪里出了问题：S

remove

var output='和
输出+=“”。因为DOM中已经存在listview。您现在要做的是在listview中插入具有相同ID的listview。尝试了这一点，但没有区别另一个问题
data.ID
，而不是
authors\u book\u list.ID
，
data.title
等。也不起作用。我知道代码一直运行到getjson行，它正在获取json，因为它可以作为一个警报，但我希望它在我的html中插入一个listview
<ul data-role="listview" id="authors_book_list" data-divider-theme="a" data-inset="true">
    <li  data-role="list-divider" data-theme="b" role="heading">Book Titles</li>
</ul>

 $(document).on("pageinit", "#catalog", function () {

    $('#kslaughter').click(function(){

        $.getJSON('book-details.json', function(data) {
            var output='<ul id="authors_book_list" data-role="listview">';
                for (var i = 0; i < 5; i++) {
                    output+="<li>" + authors_book_list.id + ": " + authors_book_list.title + " | " + authors_book_list.publisher +"</li>";
                 };
                 output+="</ul>";
                 $("#authors_book_list").append(output);
                 $('#authors_book_list').listview('refresh');

          });

     });

});

 [{
    "id": 0,
    "title": "The Surgeon",
    "author": "Tess Gerritsen",
    "year published": 2010,
    "publisher": "Transworld Digital",
    "image": "rizzoliisles1.jpg"
}, {
    "id": 1,
    "title": "The Apprentice",
    "author": "Tess Gerritsen",
    "year published": 2010,
    "publisher": "Transworld Digital",
    "image": "rizzoliisles02.jpg"
}, {
    "id": 2,
    "title": "Keeping the dead",
    "author": "Tess Gerritsen",
    "year published": 2009,
    "publisher": "Transworld Digital",
    "image": "rizzoliisles1.jpg"
}];