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?

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?

• javascript

7 Answers 7

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;    
};

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();
  }();  
}

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.

Just another way to do it.

Cases considered:

• [] -> ""
• [""] -> ""
• ["A"] -> "A"
• ["A", "B"] -> "A and B"
• ["A", "B", "C"] -> "A, B and C"

... and so on

function niceList(a) {
    return [
            a

            /* Get all the elements except the last one.
             * If there is just one element, get that
             */
            .slice(0, a.length - 1 || 1)

            /* Create a comma separated string from these elements */
            .join(", ")
        ]
        /* Process the last element (if there is one) and concat it
         * with the processed first part.
         */
        .concat(
            a

            /* Create a copy */
            .slice()

            /* Take the last element, if there is one */
            .splice(-1, Number(a.length > 1))
        )

        /* Join the two processed parts */
        .join(" and ");
}

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'

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;

I feel like this answer needs some air time, in 2022, we have an API for that, which supports multiple languages and conventions (which could be determined for each individual user).

The Intl.ListFormat API: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

Usage example as follows:

const allowedExt = [
    '.jpeg',
    '.png',
    '.gif',
    '.webp'
]

const listFormatter = new Intl.ListFormat('en', {
    style: 'long',
    type: 'conjunction'
})

listFormatter.format(allowedExt)
// .jpeg, .png, .gif, and .webp