-2

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>
Vijay Rajasekaran
  • 593
  • 1
  • 8
  • 18
  • 1
    How have ***YOU*** tried to solve that? Show us something we can add to or correct ... please.. – PeterKA Mar 19 '15 at 02:03
  • I tried this accepted answer, it shows an error and i am not too good in Javascript. http://stackoverflow.com/questions/16188556/parse-data-and-order-alphabetically-under-letter Error: Uncaught SyntaxError: Unexpected token == – Vijay Rajasekaran Mar 19 '15 at 02:09
  • 1
    You're going to have to learn to solve these simple challenges for yourself at some point. Why not start now? Either that, or hire someone. – Lye Fish Mar 19 '15 at 02:10
  • Yes, i did try. Will try to imporve my JS knowledge. – Vijay Rajasekaran Mar 19 '15 at 02:11
  • A demo of what you have so far would be helpful. – PeterKA Mar 19 '15 at 02:13
  • I'd use a `
    ` with `
    ` and `
    ` instead. Seems more appropriate. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
     – Lye Fish Mar 19 '15 at 02:33

2 Answers2

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/

bvaughn
  • 13,300
  • 45
  • 46
  • 1
    Note that `.innerText` won't work in Firefox. Use `.textContent` instead. http://jsfiddle.net/edyLg9ga/3/ – Lye Fish Mar 19 '15 at 02:35
  • This answer works well but i accepted the above answer due to the shorter code. Thank you. – Vijay Rajasekaran Mar 19 '15 at 12:14
  • The above answer is shorter because it doesn't work, by the way. If more than one word with the same letter appears in the list, it will add multiple headers. Reconsider your choice. ;) – bvaughn Mar 19 '15 at 15:10
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>
Waseem Bepari
  • 336
  • 2
  • 9