I am using SQLite as part of my Android development. I am using jQuery Mobile and PhoneGap so this is all JavaScript based. What I am trying to do is create a nested list with my data. The database at this point is very simple. There is an “Area” table and a “Restaurant” table. The Area table only consists of an AreaID and and AreaName and the Restaurants table consists of a RestaurantID, ResaurantName and AreaID. So I want to create a nested list of areas and in each area display the restaurants. Like so:
<ul>
<li>Area 1
<ul>
<li>Restaurant 1</li>
<li>Restaurant 2</li>
</ul>
</li>
<li>Area 2
<ul>
<li>Restaurant 3</li>
<li>Restaurant 4</li>
</ul>
</li>
</ul>
My code is below. I am constructing the HTML that then gets passed to a ul on the page via jQuery. So the outer list is being created, but the inner list is not being populated correctly as I’m sure I’m doing it wrong because the inner list cannot talk to the outer list because it is in another function. This is where my JavaScript skills suck. Any help would be greatly appreciated. I’m also open to a completely better way to do this whole thing if you can think of one.
THANKS!
var db;
var shortName = 'restaurants';
var version = '1.0';
var displayName = 'restaurants';
var maxSize = 65535;
db = openDatabase(shortName, version, displayName,maxSize);
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM Areas;', [],
function(transaction, areaResult) {
var theHtml = '';
if (areaResult != null && areaResult.rows != null) {
for (var i = 0; i < areaResult.rows.length; i++) {
var areaRow = areaResult.rows.item(i);
theHtml += '<li>' + areaRow.AreaName;
tx.executeSql('SELECT * FROM Restaurants WHERE AreaID = ?;', [areaRow.AreaID],
function(transaction, restaurantsResult) {
theHtml = '<ul>';
for (var i2 = 0; i2 < restaurantsResult.rows.length; i2++) {
var restaurantsRow = restaurantsResult.rows.item(i2);
theHtml += '<li>' + restaurantsRow.RestaurantName + '</li>';
};
theHtml += '</ul>';
}
);
theHtml += '</li>';
}
}
$('#areas').html(theHtml);
$('#areas').listview("refresh");
});
});