CODEWITHSUNDEEP
javascriptarraysstringsorting
scoopitup
scoopitup

Reputation: 11

Sorting an array in Javascript starting with a specific string

I would like to sort an array alphabetically starting with an option in a select. Here's my code:

HTML

<select id="select">
  <option>Apples</option>
  <option>Oranges</option>
  <option>Peaches</option>
  <option>Pears</option>
</select>
<div id="fruits">
   <ul>
      <li>Apples</li>
      <li>Peaches</li>
      <li>Pears</li>
      <li>Oranges</li>
   </ul>
</div>

Javascript

document.getElementById('select').addEventListener('click', function() {
   var index;
   var fruit = ["Apples", "Oranges", "Pears", "Peaches"];
   var listOutput = document.getElementById('fruits');
   var text = "<ul>";

   fruit.sort();

   for (index = 0; index < fruit.length; index++) {
       text += "<li>" + fruit[index] + "</li>";
   }
   text += "</ul>";

   listOutput.innerHTML = text;
});

I've been able to sort the fruit alphabetically, but I'd like to be able to sort alphabetically based on what is selected. For example, if I picked Oranges in the select I'd like the fruits to be output as so:

Oranges
Peaches
Pears
Apples

I'd like to loop the array starting at the selected option alphabetically and once all the strings have been looped, start at the top of the alphabet and continue until all the strings have been output

Upvotes: 1

Views: 136

Answers (2)

Martin Ernst
Martin Ernst

Reputation: 3279

There are some ways to achieve what you want. Let's start defining some vars outside the click-function so it's not repeated with every new click:

var listOutput = document.getElementById('fruits'),
    select = document.getElementById('select'),
    opts = select.querySelectorAll('option'),
    len = opts.length,
    fruit = [];
// populate fruit with the values of all options
for (var i = 0; i < len; i++) fruit.push(opts[i].value);
fruit.sort(); // sort fruit alphabetically

If you have to support old browsers not knowing modern array methods:

select.addEventListener('click', function() {
    var text = '<ul>',
        idx = 0,
        sel = this.selectedOptions[0].value; // get the selected value
    for (; idx < len; idx++) if (fruit[idx] == sel) break; // get index of selected value
    for (var i = idx; i < len; i++) { // get all items from selected to end
        text += '<li>' + fruit[i] + '</li>';
    }
    for (var i = 0; i < idx; i++) { // get all items from first to selected
        text += '<li>' + fruit[i] + '</li>';
    }
    listOutput.innerHTML = text + '<ul';
});

Instead of two for-loops to print the items you can do it with one:

    // get all items from selected to end, then from first to selected
    for (var i = idx; i < len;) {
        text += '<li>' + fruit[i] + '</li>';
        if (++i == len && len != idx) i = 0, len = idx;
    }

Find a DEMO here. With modern array methods (find them here) it's less to write:

var listOutput = document.getElementById('fruits'),
    select = document.getElementById('select'),
    opts = select.querySelectorAll('option'),
    fruit = [].map.call(opts, function(opt) {return opt.value}).sort();

select.addEventListener('click', function() {
    var idx = fruit.indexOf(this.selectedOptions[0].value),
        arr = fruit.slice(idx).concat(fruit.slice(0, idx));
    listOutput.innerHTML = arr.reduce(function(a, b) {
        return a + '<li>' + b + '</li>'
    }, '<ul>') + '</ul>';
});

Upvotes: 1

Sashi Kant
Sashi Kant

Reputation: 13465

You can use the 

var fruit = ["Apples", "Oranges", "Pears", "Peaches"];
fruit.sort(function(a, b){
 return // Ur Logic
})

Please refer http://www.javascriptkit.com/javatutors/arraysort2.shtml

Upvotes: 1

Related Questions