javascript - 从来自 MongoDB 的数据中使用 jquery 按名称排序

Question

所以我正在尝试构建一个基本的待办事项列表应用程序。我已经完成了大部分工作，但我似乎无法弄清楚如何对我的待办事项列表进行排序。

我只想在 dom 中对其进行排序，而不是在 mongodb 中进行排序。我想单击一个按钮然后对列表进行排序(通过 jquery 添加监听器)。

我有这段代码通过我的数据库并在页面上加载待办事项。

$(document).ready(function(){
    $.getJSON("/api/todos")
    .then(addAllTodos)

    //insert todos from db to page
    function addAllTodos(todos){
        todos.forEach((todo) => {
            //duplicated code made into function
            addSingleTodo(todo);
            //_.sortBy(todo, ['name', 1]);
        });
    };

我尝试从这里使用 sort() 对其进行排序，但没有成功。我尝试使用 lodash，但我相信它只适用于节点。为按钮设置监听器并创建另一个函数也不起作用，主要是因为我认为它只操作一个待办事项，而不是整个列表。

我正在考虑从我的 addAllTodos 中获取数据并对其进行排序，但我被卡住了。 getjson 应该返回一个数组，我相信我想做的是订购所述数组，但我不知道该怎么做。

如有任何帮助，我们将不胜感激。

这里还有addSinlgeTodo函数

function addSingleTodo(todoData){
    //create our new todo
    let newTodo = $("<li><span><i class='far fa-trash-alt'></i></span>" + todoData.name + "</li>");
    //store todo id
    newTodo.data("id", todoData._id);
    //add completed boolean
    newTodo.data("completed", todoData.completed);
    //add completed class to todo
    if(todoData.completed){
        newTodo.addClass("completed");
    }
    //append new todo
    $("ul").append(newTodo);
};

Answer 1

假设/api/todos返回一个数组，这里是一个例子；

The sort function can use a custom compare function that can be found here, basically return -1 if less than, +1 if greater, and 0 if equal. The default sort() only works on strings.

var lst = [{
    name: "adam",
    id: 1
  },
  {
    name: "neocero",
    id: 2
  },
  {
    name: "charlie",
    id: 3
  }
];
console.log(lst); //unsorted
addAllTodos(lst);

function addAllTodos(todos) {
  todos.sort((a, b) => {
    if (a.name < b.name) return -1;
    else if (a.name > b.name) return 1;
    else return 0;
  });
  console.log(todos); //sorted
  //do your magic, now it is sorted.
  //        todos.forEach((todo) => {
  //            //duplicated code made into function
  //            addSingleTodo(todo);
  //        });
};