JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<select id="combobox">
</select>

JavaScript

var dataArrayOrig = [];
var dataArraySorting = [];
var dataArraySorted = [];
$(document).ready(function() {
    var results = [
        {year: 1709, city: "Geertruidenberg"}, 
        {year: 1710, city: "Netersel"}, 
        {year: 1711, city: "Macharen"}, 
        {year: 1712, city: "Beers"}, 
        {year: 1713, city: "Hank"}, 
        {year: 1714, city: "Oudemolen"}, 
        {year: 1715, city: "Nistelrode"}
    ];
    
    for (i=0; i < results.length; i++) {
       console.log(results[i].year + ", " + results[i].city);
       dataArrayOrig.push({
           "id" : results[i].year,
           "label" : results[i].city
       });
       dataArraySorting.push({
           "id" : results[i].year,
           "label" : results[i].city
       });
       
       
       /* In-line sorting
       dataArraySorting.sort(function(a, b){
          if (a.label < b.label) return -1;
          if (b.label < a.label) return 1;
          return 0;
       }); */
       // Use a function to sort
       dataArraySorting.sort(compare);
       JSON.stringify(dataArraySorting);  // cities alphabetized, mismatched years 
    }
    
    // Rematch the years back to the sorted cities
    for (var j=0; j < dataArraySorting.length; j++) {
        for (var k=0; k < dataArrayOrig.length; k++) {
            if (dataArraySorting[j].label == dataArrayOrig[k].label) {
                dataArraySorted.push({
                    "id" : dataArrayOrig[k].id,
                    "label" : dataArraySorting[j].label
                });
                console.log("Sorted ID: " + dataArrayOrig[k].id + ", Sorted label: " + dataArraySorting[j].label);
                dataArraySorted.sort(compare);
                JSON.stringify(dataArraySorted);
             }
        }
    }
 
    if (dataArraySorted.length > 0) {
        $.each(dataArraySorted, function() {
            $("#combobox").append($("<option></option>").val(this['id']).html(this['label'])); 
        });    
     }
     
    ...