How can I get my array as a *nice* human readable list in JavaScript?

Question

I have a list of allowed file extensions that can be uploaded to my site.

I check them with jQuery Validation plugin.

I'm displaying an error message if they choose a non supported extension.

It looks like

var msg = 'You may only upload files of type ' + allowedExt.join(', ');

Obviously the list doesn't look too flash. I'd like it to look more human readable.

Any way to do this?

Answer 1

Hello!

Yes you can!

var niceList = function(array, join, finalJoin) {       
    join = join || ', ';
    finalJoin = finalJoin || ' and ';       
    var length = array.length;      
    return array.slice(0, length - 1).join(join) + finalJoin + array[length - 1];    
};

alert(niceList([a, b, c])); // 'a, b and c'

Answer 2

A simpler way to do the answer posted by alex is by using .pop() to get the last element off:

var niceList = function(array, join, finalJoin) {
    var arr = array.slice(0), last = arr.pop();
    join = join || ', ';
    finalJoin = finalJoin || ' and ';
    return arr.join(join) + finalJoin + last;    
};

Answer 3

I took you literally and made it into an actual HTML list.

var extensions = ['html', 'txt', 'png', 'jpg'];
var extension_list = '<ul>';

for(i=0; i<extensions.length; i++)
{
    extension_list += '<li>'+extensions[i]+'</li>';
}

extension_list += '<ul>';

var msg = '<p>Sorry, you can only upload the following extensions:</p>'+extension_list;

Answer 4

Since we're apparently providing different versions of alex's answer, here's one without join:

function niceList(array, join, final) {
   return array.reduce(function (pv, cv, i, a) { 
      return pv + (i == a.length - 1 ? final : join) + cv; 
   });
}; 

Doesn't work with old browsers, etc.

Answer 5

The accepted answer does not handle a one item list very well.

function niceList(array) {
  if (!array || array.length == 0) return "";
  var clone = array.slice(0);

  return function build() {
    if (clone.length == 1) return clone[0];
    if (clone.length == 2) return clone[0] + ' and ' + clone[1];
    return clone.shift() + ", " + build();
  }();  
}