Jquery - generating nested lists from SQLite

Question

I am trying to create a group collapsible list view in jquery mobile using data retrieved via SQLite.

My data looks something like this:

Letter |  Number
A      |  1
A      |  2
B      |  3
B      |  4
C      |  5

I want a 'Letter' for each header group which is collapsible, and the various corresponding 'Number' to be a child of each group. Both the header and the subsequent children should be ordered ascending (children within their respective groups).

So essentially the final result in HTML will look something like this:

<div data-role="collapsible-set" id="LetterList" data-filter="true" data-filter-reveal="false">

<div data-role="collapsible" class="collapseclass">
<h2>A</h2>
<ul data-role="listview">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>

<div data-role="collapsible" class="collapseclass">
<h2>B</h2>
<ul data-role="listview">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>

<div data-role="collapsible" class="collapseclass">
<h2>C</h2>
<ul data-role="listview">
<li><a href="#">5</a></li>
</ul>
</div>

</div>

I have attempted creating the headers first, by querying a distinct list of Letter, then inserting the divs:

function querySuccessDistinctLetter(tx, result) {

        $('#LetterList').empty();
        $.each(result.rows, function (index) {
            var row = result.rows.item(index);
            $('#LetterList').append('<div data-role="collapsible" class="collapseclass"><h2>' + row['Letter'] + '</h2></div>');
        });

}

But now I am stumped as to how I can insert the 'Number' children under each header? Or am I going about this the wrong way?

ezanker · Accepted Answer · 2017-04-24 16:29:01Z

1

You could do it with one query. Make sure to sort by letter then number in the query so the result looks like this:

var result = {
  rows: [
    {Letter: "A", number: 1},
    {Letter: "A", number: 2},
    {Letter: "B", number: 3},
    {Letter: "B", number: 4},
    {Letter: "B", number: 5},
  ]
};

Then build the HTML markup by stepping through the rows and seeing when the letter changes:

  var curLetter;
  var html = '';
  $('#LetterList').empty();
  for (var i=0; i < result.rows.length; i++){
    var row = result.rows[i];
    var letter = row.Letter;
    var number = row.number;

    if (letter != curLetter){
      if (i > 0) html += '</ul></div>';
      curLetter = letter;
      html += '<div data-role="collapsible" class="collapseclass"><h2>' + letter + '</h2><ul data-role="listview">';
    }
    html += '<li><a href="#">' + number + '</a></li>'       
  }
  $('#LetterList').append(html).enhanceWithin();

DEMO

edited Apr 24, 2017 at 16:29

answered Apr 21, 2017 at 13:22

ezanker

24.7k1 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ralph Over a year ago

You are a genius - thank you! Note that I had to change var html; to var html = ''; to avoid an undefined value and move the html variable under var curLetter'

ezanker Over a year ago

@Ralph, thanks. My mistake on the html variable. I have updated the answer and demo for future searchers.

Collectives™ on Stack Overflow

Jquery - generating nested lists from SQLite

1 Answer 1

DEMO

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related