使用JavaScript在锚定标记中的HTML链接的alpha排序数组

Question

Ok - This one involves both javascript and Google Apps Script. The problem is with the javascript.

I am creating a list of links to files in a Google Drive folder using the following code:

function doGet(e) {
  var template = '<table style =""><tr><th>name</th></tr>APPS_SCRIPT_CONTENT</table>';
  var dir = 'MY_FOLDER_ID';
  var folder = DriveApp.getFolderById(dir);
  var contents = folder.getFiles();
  var filelist = []; 
  var file, name, url = []; 
  while (contents.hasNext()) {
   file = contents.next();
   name = file.getName();
   url = file.getUrl();
   filelist = filelist.concat('<tr><td><a id="' + name + '" href="' + url + '">' + name + '</a></td></tr>');
  }
}

This generates an array filelist that I want to alpha sort. I want to sort these by the name of the file (in the ID to put it before the messy google link).

filelist.sort();
var output = HtmlService.createHtmlOutput(template.replace('APPS_SCRIPT_CONTENT', filelist));
return output.setTitle('Directory List').setSandboxMode(HtmlService.SandboxMode.IFRAME);

For four sample files, I get the following output:

,,,
name
Sample 2
Zzz file
aaa file
sample 1

A couple of problems: 1: They aren't alpha sorted. In fact, they are sorted by last modified date. If I modify a file and rerun the script, the modified file jumps to the top. 2: I have no idea where the three commas above the 'name' came from.

What can I do next?

Answer 1

Since folder is used to getFiles which is a collection of files you can use underscore.js to basically sort them as json data like the following:

function doGet(e) {

  var template = '<table style =""><tr><th>name</th></tr>APPS_SCRIPT_CONTENT</table>';
  var dir = 'MY_FOLDER_ID';

  var files = [{name: 'Sample 2', url:''},{name: 'zzz file', url:''},{name: 'aaa file', url:''},{name: 'Sample 1', url:''}];

  var sortedArray = _.sortBy(files, 'name');

  var filelist = [];

  _.each(sortedArray, function(file){
      filelist += '<tr><td><a id="' + file.name + '" href="' + file.url + '">' + file.name + '</a></td></tr>'
  });

}

Underscore is really good at sorting collections of data. If you're unsure about the structure of folder you can console.log(JSON.stringify(folder)) which will show you the JSON structure of the folder.

Here is a plunker snippet as well: http://plnkr.co/edit/EDO3DWVOraRb5Y02XOvh?p=preview

Answer 2

This will address your comma Dilemma, you are getting that extra commas because you are converting your array to a string here:

template.replace('APPS_SCRIPT_CONTENT', filelist)

Which basically joins the array objects which a comma, gives you a output like this:

<table style =""><tr><th>name</th></tr><tr><td>Filename</td></tr>,<tr><td>Filename</td></tr>,<tr><td>Filename</td></tr>,<tr><td>Filename</td></tr>,<tr><td>Filename</td></tr>,

As you can see all the extra commas are not within a tr or td tag. This pushes them out of the table and displays it on top. The correct syntax for replace would be this:

template.replace('APPS_SCRIPT_CONTENT', filelist.join(""))

Gives this:

<table style =""><tr><th>name</th></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>Filename</td></tr><tr><td>

Edit: Your sort is working as excepted. Since you have lower case and uppercase filename it sorts the uppercase first and then sorts the lower case letters.

I modified the code to help sort better:

while (contents.hasNext()) {
    file = contents.next();

    name =file.getName()
    idName = name.toUpperCase() // Use upper case for ID and it should sort correctly.
    url = file.getUrl();

    filelist = filelist.concat('<tr><td><a id="' + idName + '" href="' + url + '">' + name + '</a></td></tr>');
} 
filelist.sort()

Hope that helps, let me know!