2

I have a filelist object that contains over 1000 image files. I want the object to be sorted by file name, which is alphanumeric. In other words, I want to do a natural sort. The file names are like this:

d_1_ct.png
d_2_ct.png
d_3_ct.png
d_4_ct.png

Turning the filelist object into an array by doing [].slice.call(filelist_object) or Array.from(filelist_object) and then calling sort() results in alphabetical sort only. How can I make the filelist object naturally sorted on file name?

I am okay with turning it into an array, as long as I'm able to display the image files using URL.createObjectURL() on the array elements.

Natural-sorting alphanumeric strings is not what I'm looking for, though the names of my files in the filelist object are alphanumeric strings. The filelist object contains the following properties:

0: File
lastModified: 1493435514308
lastModifiedDate: Sat Apr 29 2017 08:41:54 GMT+0530 (India Standard Time)
name: "d_1_ct.png"
size: 5307
type: "image/png"
webkitRelativePath: "img/d_1_ct.png"
__proto__:File

I want to sort on either name or webkitRelativePath, while retaining all the properties of the filelist object, as I am using the index numbers of the object to display the images.

mixedbag99
  • 529
  • 1
  • 4
  • 17
  • Think this might help you out https://stackoverflow.com/questions/2802341/javascript-natural-sort-of-alphanumerical-strings – webbm Apr 29 '17 at 10:45
  • Possible duplicate of [Javascript : natural sort of alphanumerical strings](http://stackoverflow.com/questions/2802341/javascript-natural-sort-of-alphanumerical-strings) – idmean Apr 29 '17 at 11:10
  • Updated to explain why it isn't a duplicate of natural sort of alphanumeric strings. – mixedbag99 Apr 29 '17 at 11:16

3 Answers3

6

I first converted my filelist object into an array using Array.from().

myArray = Array.from(myFileListObject);

Then, I used the naturalCompare() function written by Lauri Rooden. Here is the GitHub link.

I then called the naturalCompare() function on my array as follows:

myArray.sort(function(a,b) {
    return String.naturalCompare(a.name, b.name)
});

My array is now "naturally" sorted correctly. It still retains all the properties of the filelist object, so I am still able to use the URL.createObjectURL() method on its contents to display the images.

mixedbag99
  • 529
  • 1
  • 4
  • 17
  • Please show how you use the the URL.createObjectURL() method on the array contents to display the images. – Genki Nov 15 '21 at 07:17
2

There's now a much easier way using localeCompare: http://fuzzytolerance.info/blog/2019/07/19/The-better-way-to-do-natural-sort-in-JavaScript/

const items =  ['3rd', 'Apple', '24th', '99 in the shade', 'Dec', '10000', '101', '$1.23']
items.sort((a, b) => a.localeCompare(b, navigator.languages[0] || navigator.language, {numeric: true, ignorePunctuation: true}))
console.log(items)

// [ "$1.23", "3rd", "24th", "99 in the shade", "101", "10000", "Apple", "Dec" ]

Additionally, you can speed this up by declaring the collator object beforehand.

graup
  • 1,089
  • 1
  • 12
  • 20
0

for a long time, i solved this for german "Umlaute" you can adapt this...

    function fhwSort(a, b){
       function fhwSplit(fstring){
          var mapObj = {
                ä:"ae",
                ö:"oe",
            ü:"ue",
            Ä:"ÄE",
            Ö:"ÖE",
            Ü:"UE",
            ß:"ss"
            };
          fstring = fstring.replace(/ä|ö|ü|Ä|ö|ü|ß/gi, function(matched){
                       return mapObj[matched];
                  });
          return fstring.toUpperCase().replace(/\d*/g, function (x) {
            return !x=="" ? '0'.repeat(20).substr(0,20-x.length)+x:'';});
       }
       a=fhwSplit(a["name"]);    
       b=fhwSplit(b["name"]);    
       return (a>b)+(a<b)*-1;
    }
    var data = [
       {name : "5.1. Test 3"},
       {name : "5.1. Test 1"},
       {name : "5.2. Test 2"},
       {name : "5.10. Test 10"},
       {name : "5.12. Test 12"},
       {name : "Karl"},
       {name : "Kader"},
       {name : "Käse"},
       {name : "Kuchen"}

       ];
    console.log("fhwSort");
    data.sort(fhwSort);
    for (var i = 0; i < data.length; i++){
      console.log(data[i]["name"]);
    }
Frank Wisniewski
  • 1,182
  • 8
  • 7