How to convert Array to <ul><li> Alphabetical List with Letters as Headings

Question

I have an Array ["Apple", "Orange", "Pineapple"]

How do i convert it to the below list.

<ul>

<li id = "header">A</li>
<li id = "list" >Apple</li>

<li id = "header">O</li>
<li id = "list" >Orange</li>

<li id = "header">P</li>
<li id = "list" >Pineapple</li>

</ul>

Answer 1

this is one of the way you can do it hope this will help you

var arr = ["Apple", "Orange", "Pineapple"];
var $el = '<ul>';
$.each(arr, function(i, v) {
  $el += '<li id = "header">' + v.slice(0, 1) + '</li>';
  $el += '<li id = "list" >' + v + '</li>';
});
$el += '<ul>';
$('body').append($el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

var array = ["Apple", "Another-fruit", "Orange", "Pineapple"];

function createList() {
    var list = document.createElement("ul");
    var listItem;
    var currentLetter = '';

    for (var i = 0, length = array.length; i < length; i++) {
        var item = array[i];
        var firstLetter = item.charAt(0);

        if (currentLetter != firstLetter) {
            currentLetter = firstLetter;

            listItem = document.createElement("li");
            listItem.innerHTML = firstLetter;

            list.appendChild(listItem);
        }

        listItem = document.createElement("li");
        listItem.innerHTML = item;

        list.appendChild(listItem);
    }

    return list;
}

document.body.appendChild(createList());

http://jsfiddle.net/bvaughn/edyLg9ga/4/