在jquery mobile中创建动态列表视图不起作用?

时间:2013-04-24 16:27:54

标签: jquery json jquery-mobile

在尝试动态创建动态列表视图时,我得到了这个

what i get

这是我的json

{"eventid":["61","23"],"name":["Clare Birthday","Mums Birthday"],"enddate":["Sat 27th April 2013","Wed 19th June 2013"]}

这是我的代码。

<script type="text/javascript">
                                $(function(){
                                    var items="";
                                        $.getJSON("ajaxResponder.php?method=check-events",function(data){
                                            $("#contacts").html(
                                            '<li data-role="list-divider" role="heading">Live Events</li>'+
                                                $.each(data,function(index,item){
                                                    '<li><a href="check-events-details?eventid='+item.eventid+'" data-transition="slide">'+item.name+ 
                                                    '<p>End Date: '+item.enddate+'</p></li>'
                                                }));
                                            $("#contacts").listview("refresh");
                                        });
                                });

                        </script>

            <div data-role="fieldcontain">
            <ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
            </ul>
            </div>

任何人都可以看到我出错的地方吗?

1 个答案:

答案 0 :(得分:1)

问题是,您没有正确读取数组。以下解决方案基于您希望创建两个包含id链接的列表项的假设。有许多方法可以读取数组,这取决于您希望如何输出数据。

var object = {
 "eventid": ["61", "23"],
 "name": ["Clare Birthday", "Mums Birthday"],
 "enddate": ["Sat 27th April 2013", "Wed 19th June 2013"]
};

首先,您需要将JSON对象转换为数组。

var array = [object];

然后在里面循环。我在这里使用for语句循环两次。

for (var i = 0; i < 2; i++) {
 $.each(array, function (index, values) {
  var events = values.eventid;
  var names = values.name;
  var enddates = values.enddate;
  $('[data-role="listview"]').append('<li><a href=link"' + events[i] + '"> ' + names[i] + ' - ' + enddates[i] + '</a></li>');
  $('[data-role="listview"]').listview('refresh');
 });
}
  

<强> Demo

注意:元素id应以字母而非数字开头。