javascript - 按字母顺序向下拉列表添加选项

Question

我正在构建一个函数，它将接收一个包含对象的数组。我需要用数组中对象的一些值按字母顺序填充列表。

这是我迄今为止尝试过的:

var options = $("#forms-stage");

var formsTest = [
    {
        name: "Here's a Form",
        category: ["cat1"]
    },
    {
        name: "Sample Form",
        category: ["cat2"]
    },
    {
        name: "zzAnother Form",
        category: ["cat1","cat2"]
    },
];

function allForms(obj) {
    options.empty();
    $.each(obj, function(index, val){

        var add = val.name

        if(options.children().length === 0) {
            options.append("<option>" + val.name + "</option>");
        } else {
            for(i=0; i < obj.length; i++) {
                if(add > options.children()[i]) {
                    options.append("<option>" + val.name + "</option>");
                }
            }
        }
    })
 };

当我使用它时，我得到一个包含“Here's a Form”的列表，然后是“zzAnother Form”的三个迭代。我认为问题在于循环遍历每个位置，附加选项会导致问题。

我查看了其他解决方案 here和 here ，但它们似乎都不适合我这里的对象数组情况。

这两个解决方案都使用$(this)。但是，简单地测试 console.log($(this).name) 会导致三个未定义的结果，并且 console.log($(this).name.text()) 导致“无法读取未定义的属性”错误。

在函数内尝试 $(this) 的示例:

 function allForms(obj) {
    options.empty();
    $.each(obj, function(index, val){

        var add = val.name

        console.log($(this).name);
    })
 };

Answer 1

您可以sort Array，然后使用普通 Javascript for-loop

附加选项

在for循环之前对数组进行排序

obj.sort((a, b) => a.name > b.name ? 1 : (a.name < b.name ? -1 : 0));

var options = $("#forms-stage");

var formsTest = [{
    name: "Here's a Form",
    category: ["cat1"]
  },
  {
    name: "Sample Form",
    category: ["cat2"]
  },
  {
    name: "zzAnother Form",
    category: ["cat1", "cat2"]
  },
];

function allForms(obj) {
  obj.sort((a, b) => a.name > b.name ? 1 : (a.name < b.name ? -1 : 0));

  options.empty();
  $.each(obj, function(index, val) {
      options.append("<option>" + val.name + "</option>");
  });
};

allForms(formsTest);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="forms-stage"></select>