Add Index letter to list from JavaScript

user_13509551 0
Viewed 77

Thank you for your answer, I've been working in generating a list from an object with checkboxes, but I notice that the bigger the list the more difficult for the user to find an item is. So, how can I make this list looks more like the image?? Add an index letter on the side.

Click Here for IMAGE

const myObjects = {
  Ana: 99,
  Jhon: 99,
  Carla: 99,
  George: 99,
  Luis: 99,
  Mario: 99,
  Brandy: 99,
  Gin: 99,
  Ann: 99,
  Arnold: 99,
  Coffee: 99,
  Karl: 99,
  Kevin: 99,
  Kurt: 99,


}

//Create an arry from Object Keys and display it
let NameDataBase = []
NameDataBase = Object.keys(myObjects);

//Sort ascending
NameDataBase.sort();

//Create CheckBox and use NameDataBase for labels
var myDiv = document.getElementById("cboxes");

for (var i = 0; i < NameDataBase.length; i++) {

  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  myDiv.appendChild(br);

  label.appendChild(document.createTextNode(NameDataBase[i]));
}
<div id="cboxes"></div>

javascript
2 Answers

Inside your loop, test whether you're either at the first iteration, or if the iteration you're up to begins a new letter, and if so, then output that letter:

if ( ! i || ( NameDataBase[i][0] != NameDataBase[i-1][0] ) ) {
  myDiv.appendChild(document.createTextNode(NameDataBase[i][0]));
}

This test goes inside your loop:

for (var i = 0; i < NameDataBase.length; i++) {

  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  
  // Test if we're at the first iteration, or if this iteration's name starts with a different letter from the previous iteration:
  if ( ! i || ( NameDataBase[i][0] != NameDataBase[i-1][0] ) ) {
    myDiv.appendChild(document.createTextNode(NameDataBase[i][0]));
  }

  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  myDiv.appendChild(br);

  label.appendChild(document.createTextNode(NameDataBase[i]));
}

If you want it to be formatted differently, you can output table tags instead, but this should give you the general idea.

user_3787790 
    <!DOCTYPE html>
    <html>
    <body>



    <div id="cboxes"></div>


    <script>
    const myObjects = {
      Ana: 99,
      Jhon: 99,
      Carla: 99,
      George: 99,
      Luis: 99,
      Mario: 99,
      Brandy: 99,
      Gin: 99,
      Ann: 99,
      Arnold: 99,
      Coffee: 99,
      Karl: 99,
      Kevin: 99,
      Kurt: 99,
    }

    //Create an arry from Object Keys and display it
    let NameDataBase = []
    NameDataBase = Object.keys(myObjects);

    //Sort ascending
    NameDataBase.sort();

    //Create CheckBox and use NameDataBase for labels
    var myDiv = document.getElementById("cboxes");
    var alphabet = null;

    for (var i = 0; i < NameDataBase.length; i++) {
      console.log(NameDataBase[i].toLowerCase().charAt(0));
      var checkBox = document.createElement("input");
      var label = document.createElement("id");
      var br = document.createElement('br');
      checkBox.type = "checkbox";
      checkBox.value = NameDataBase[i];
      checkBox.id = NameDataBase[i];
      if(alphabet == null && NameDataBase[i].toLowerCase().charAt(0)) //cond to add first character before any other check
      {
        myDiv.appendChild(document.createElement('p'));
        var character = document.createTextNode("Alphabet : "+NameDataBase[i].toLowerCase().charAt(0));
        myDiv.appendChild(character);
        myDiv.appendChild(document.createElement('p'));
      }
      if(alphabet && alphabet != NameDataBase[i].toLowerCase().charAt(0))//Cond to check first char is changed in sorting
      {
        if(alphabet)
        {
              myDiv.appendChild(document.createElement('p'));
              var character = document.createTextNode("Alphabet : "+NameDataBase[i].toLowerCase().charAt(0));
              myDiv.appendChild(character);
              myDiv.appendChild(document.createElement('p'));

        }
        myDiv.appendChild(checkBox);
        myDiv.appendChild(label);
  
      }
      else
      {
          myDiv.appendChild(checkBox);
          myDiv.appendChild(label);
      }

      myDiv.appendChild(br);
      label.appendChild(document.createTextNode(NameDataBase[i]));
      alphabet = NameDataBase[i].toLowerCase().charAt(0);
    }

    </script>

    </body>
    </html>

You can add ul/ol li or table listout for changing the view like the following

for (var i = 0; i < NameDataBase.length; i++) {
        var li = document.createElement('li');     // create li element.

  console.log(NameDataBase[i].toLowerCase().charAt(0));
  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  if(alphabet == null && NameDataBase[i].toLowerCase().charAt(0))
  {
          var ul = document.createElement('ul');
         var character = document.createTextNode(NameDataBase[i].toUpperCase().charAt(0));
          ul.appendChild(character);
  }
  if(alphabet && alphabet != NameDataBase[i].toLowerCase().charAt(0))
  {
    if(alphabet)
    {
                var character = document.createTextNode(NameDataBase[i].toUpperCase().charAt(0));
          ul.appendChild(character);
                var ul = document.createElement('ul');

    }
    li.appendChild(checkBox);
    li.appendChild(label);
     ul.appendChild(li);
  }
  else
  {
    li.appendChild(checkBox);
    li.appendChild(label);
     ul.appendChild(li);
  }
  myDiv.appendChild(ul);
  label.appendChild(document.createTextNode(NameDataBase[i]));
  alphabet = NameDataBase[i].toLowerCase().charAt(0);
  }
user_47209500
Related