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，但我相信仅适用于node。为按钮设置侦听器并创建另一个功能也不起作用，主要是因为我认为该操作仅操作一个待办事项，而不是整个列表。

我当时正在考虑从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返回一个数组，这是一个示例；

sort函数可以使用可以在here中找到的自定义比较函数，如果小于则基本上返回-1，如果大于则返回+1，等于则返回0。默认的sort()仅适用于字符串。

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);
  //        });
};

使用来自MongoDB的数据的jquery按名称排序

1 个答案: