Creating dynamic list view in jquery mobile not working?

Question

When trying to create a dynamic listview on the fly i get this

what i get

here is my json

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

and here is my code.

<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>

can anyone see where i am going wrong?

You are not reading the array correctly. Try item[index].eventid — Omar
– Omar, Commented Apr 24, 2013 at 19:04

Omar · Accepted Answer · 2013-04-25 13:34:50Z

The problem is, you aren't reading the Array correctly. The below solution is bases on assumption that you want to create two list items with links to id. There are many ways to read arrays, it depends on how you want to output the data.

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

First, you need to convert JSON object to an Array.

var array = [object];

And then loop inside it. I used for statement here to loop twice.

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

Note: Element id should start with a letter not a number.

Collectives™ on Stack Overflow

Creating dynamic list view in jquery mobile not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related