按字符串值排序输出至HTML：修正JSON按name排序的JS代码

我在社区翻了好多相关话题，都没找到能直接用的解决方案。自己写了个脚本，原本是想在JavaScript里导入JSON数组，然后把数据输出到HTML表格里，核心需求是按name字段对JSON数据做排序。结果之前写的字符串比较代码不仅没法正常运行，还直接把程序搞崩了，后来多亏Mihai帮忙，代码终于修复能用了。

修复后的完整JavaScript代码 #

$(function() {
  $.getJSON('./scripts/items.json', function(data) {
    function compareStrings(a, b) {
      // 采用大小写不敏感的比较方式
      a = a.toLowerCase();
      b = b.toLowerCase();
      return a.localeCompare(b);
    }

    data.birra.sort(function(a, b) {
      return compareStrings(a.name, b.name);
    });

    $.each(data.birra, function(i, f) {
      var tblRow = "<tr>" +
                   "<td>" + f.name + "</td>" +
                   "<td>" + f.description + "</td>" +
                   "</tr>";
      $(tblRow).appendTo("#table-birra tbody");
    });
  });
});

对应的JSON数据（items.json） #

{
  "birra": [
    {
      "id": 1,
      "name": "Corona",
      "description": "La Corona Extra, è una birra Pale lager messicana, prodotta dal birrificio Cerveceria Modelo e, limitatamente alla produzione destinata all'esportazione nel territorio statunitense, dalla Constellation Brands",
      "country": "Messico"
    },
    {
      "id": 2,
      "name": "Birra Moretti",
      "description": "Birra Moretti è stata un'azienda specializzata nella produzione di birra. Nasce nel 1859 a Udine con il nome di Fabbrica di Birra e Ghiaccio. Fu fondata da Luigi Moretti, un imprenditore, la cui famiglia era dedita al commercio e all'ingrosso di bevande e generi alimentari, il marchio è stato acquisito dalla società olandese Heineken nel 1996.",
      "country": "Italia"
    },
    {
      "id": 3,
      "name": "Beck's",
      "description": "Beck's (ufficialmente \"Brauerei Beck & Co KG\") è un birrificio tedesco",
      "country": "Germania"
    },
    {
      "id": 4,
      "name": "Forst",
      "description": "Birra Forst (in tedesco Spezialbier-Brauerei Forst) è il maggiore produttore italiano indipendente[1] di birra. Detentore anche del marchio Menabrea.",
      "country": "Italia"
    },
    {
      "id": 5,
      "name": "Tabucchi",
      "description": "Birra italiana prodotta artigianalmente, molto maltata",
      "country": "Italia"
    }
  ]
}

关键修复点说明 #

• 实现了大小写不敏感的字符串比较函数compareStrings：先把字符串统一转成小写，再用localeCompare()做自然排序，避免了大小写差异导致的排序混乱
• 调整了执行顺序：确保排序逻辑在遍历渲染表格前完成，保证页面输出的是已排序的数据
• 修正了原代码中的语法问题，消除了导致程序崩溃的隐患

内容的提问来源于stack exchange，提问作者Darius Pum