Sqlite jquery вложенная петля

Question

Я немного новичок в этом - я пытался в течение нескольких дней модифицировать различные ответы stackoverflow без какой-либо удачи.

Для моего приложения phonegap - с использованием sqlite, jquery Я пытаюсь прокрутить таблицу категорий, а затем вложенной список «видов» для каждой категории. Код ниже создает внешний цикл, но не внутренний.

Любая помощь будет очень признателен

db.transaction(function (tx) { 
    tx.executeSql('SELECT * FROM cat;', [], function (transaction, catResult) { 
      var theHtml =''; 
      for (var i = 0; i < catResult.rows.length; i++) { 
       // outer loop 
       var catRow =catResult.rows.item(i); 
       theHtml +='<li>' +catRow.Name; 
       function doinner(i) { 
        var theHtml2 =''; 
        tx.executeSql('SELECT * FROM kind WHERE cat_id = ?;', [catRow.Id], function (transaction, kindResult) { 
         theHtml2 ='<ul>'; 
         for (var i2 = 0; i2 < kindResult.rows.length; i2++) { 
           // inner loop 
           var kindRow =kindResult.rows.item(i2); 
           theHtml2 +='<li>' +kindRow.kind +'</li>'; 
         }; 
         // end inner loop 
          theHtml2 +='</ul>'; 
        }); 
        // end function 
        theHtml +=theHtml2; 
       } 
       // end doinner 
       doinner(i) ; 
       // this function is supposed to assemble and append the inner loop 
       theHtml +='</li>'; 
      } 
      // end outer loop 
      $('#catList').html(theHtml); 
    }); 
    // end function 

}); 
// end transaction 

Answer 1

Функция обратного вызова вы даете executeSql выполняется асинхронно, поэтому theHtml2 еще не содержит ничего, когда вы используете его.

Простой способ справиться с этим, чтобы получить данные с помощью одного запроса с объединением, а затем использовать один цикл для построения HTML списков:

tx.executeSql('SELECT cat.name, kind.kind ' + 
       'FROM cat ' + 
       'LEFT JOIN kind ON cat.id = kind.cat_id '+ 
       'ORDER BY 1, 2', 
       [], function(tx, result) { 
    var theHtml = ''; 
    var lastName = ''; 
    for (var i = 0; i < result.rows.length; i++) { 
     var row = result.rows.items(i); 
     if (row.name != lastName) { 
      if (theHtml != '') 
       theHtml += '</ul>'; 
      theHtml += '<li>' + row.name; 
      lastName = row.name; 
      theHtml += '<ul>'; 
     } 
     if (!!row.kind) 
      theHtml += '<li>' + row.kind + '</li>'; 
    } 
    if (theHtml != '') 
     theHtml += '</ul>'; 
    $('#catList').html(theHtml); 
});