Using Ajax to parse JSON into Jquery UI List

[RachelR]

Hello All,

I'm trying to GET values from a DB table in JSON format through AJAX and then parse them into a JQuery List.

test.php (partial)

while($row=mysql_fetch_assoc($sql))
$output[]=$row;
print(json_encode($output));
mysql_close();

JSON Format it Returns:

[{"name":"1423 Peacock Haven"},{"name":"9835 Fredericksburg Rd"},{"name":"Test Project"}]

Following along with this tutorial, I'm trying to parse my own JSON above but nothing is returned in the list. I feel I may be all over the map here with errors - I'm not very familiar with AJAX as you can tell. I am also wondering if the issue is in my JSON as it does not have an object name like 'results' in the tutorial. Here is my modified code based upon the tutorial:

<script type="text/javascript">
     function appReady(){
     var ajax = new XMLHttpRequest();
     ajax.open("GET","http://somobetech.com/test.php",true);
     ajax.send();
 
     ajax.onreadystatechange=function(){
          if(ajax.readyState==4 && (ajax.status==200)){
               console.log(json_results);
            		// Need to add UL on AJAX call or formatting of userlist is not displayed
            		$('#twitList').append('<ul data-role="listview"></ul>');
            		listItems = $('#twitList').find('ul');
            		$.each(json_results.results, function(key) {
                	html = '<center>'+json_results.results[key].name+'<center>';
                	listItems.append('<li>'+html+'</li>');
            	});
            // Need to refresh list after AJAX call
            $('#twitList ul').listview();
          }
     }
}
document.addEventListener("deviceready", appReady, false);	
</script>

Note: I am retrieving the JSON differently, based upon this tutorial.

Any help you can provide pointing me in the right direction would be greatly appreciated!

[RachelR]

Was able to finally pull correct values. Needed to modify the PHP creating the JSON to echo an object name, "results", along with the JSON members.

Now I'm just trying to simplify the code and load each value into a Jquery button. For some reason, the data will work if I'm just using regular html attributes but when I introduce Jquery Mobile UI elements, it doesn't load them. Any ideas on what I am doing wrong?

<script type="text/javascript">
	
	$(document).ready(function(){
		var url="http://somobetech.com/test.php";
		$.getJSON(url,function(json){
		console.log(json.results);
		
		//initialize button
		var button = "";
		
		//loop through data
		$.each(json.results, function(i,project){
		button = '<a href="#" data-role="button">' + project.name + '</a>';
		$("#content").append(button);

												});

										});

								});

	</script>