How to populate a jQuery Mobile list view with JSON data from server?

Have a look at the jQuery.getJSON() method on w3schools and jQuery API.

Example from jQuery API:

$.getJSON('ajax/test.json', function(data) {  var items = [];  $.each(data, function(key, val) {    items.push('<li id="' + key + '">' + val + '</li>');  });  $('<ul/>', {    'class': 'my-new-list',    html: items.join('')  }).appendTo('body');});

This example, of course, relies on the structure of the JSON file:

{  "one": "Singular sensation",  "two": "Beady little eyes",  "three": "Little birds pitch by my doorstep"}

Using this structure, the example loops through the requested data, builds an unordered list, and appends it to the body.

try this one:

$.ajax({                                                                       type: "POST",                                                                            url: "your_url",      contentType: "application/json; charset=utf-8",                                                                dataType: "json",       success:successFunction,                                                   error: function(msg) {                      alert(msg.statusText);     } });  function success:successFunction(data){     var html ='';     $.each(data.d, function(index, item) {         html += '<li><a href="#">' + item.Your_data+ '</a></li>';     });    $('#ul_id').append($(html));    $('#ul_id').trigger('create');        $('#ul_id').listview('refresh');}

function makeList() {    $.post("http://example.com/getlist.php",        function(resultfromphp) {            $('#ulListview').append(resultfromphp);            $('#ulListview').trigger('create');                $('#ulListview').listview('refresh');    });}$("#pageName").live('pagebeforeshow', function(event) {    makeList();});

This works perfectly for me. The php is returning <li></li> tagsThe html is a <ul id="ulListview"></ul> tag