How do I sort $.each() functions by date

Question

Basically I need to sort the $.each(messages, function(){}); by date from my array. Methods I've tried has not worked and struggling to find a good method.

I've mainly attempted to use the sort function to sort the date but either gotten errors in the console about it not being a function or it simply does not do anything.

var messages = [
        {
            contact_name: "Josef Braga",
            time: "2018-12-20 01:53:49",
            isRead: 1,
        },
        {
            contact_name: "289-1445",
            time: "2018-12-20 02:53:49",
            isRead: 0,
        },
    ];

    $(".phone-content").append("<div class='phone-inner'></div>");
    $.each(messages, function () {
        $(".phone-inner").append("" +
            "<div data-date='" + this.time + "' class='phone-message'>" +
            "                    <div class='mtop'>" +
            "                        <p class='c-left " + (!this.isRead ? "new-message" : "") + "'>" + this.contact_name + "</p>" +
            "                        <p class='c-right'>" + relative_time(this.time) + "</p>" +
            "                    </div>" +
            "                    <div class='mdesc'>" +
            "                        <p>Dette er en ny besked! Hold da kæft hvor fedt mayn!</p>" +
            "                    </div>" +
            "                    <hr />" +
            "                </div>" +
            "            </div>");
    });

The expected result should be the most recent message goes to the top - but it does only sort it by the way its set up in the messages array.

Answer 1

In your case, the time is a string, so it is sorting alphabetically. You need to convert time into timestamp first(which will be number) and then sort it.

For example, let's say your array of messages looks like this:

var messages = [
    {
        contact_name: "Josef Braga",
        time: "2018-12-20 01:53:49",
        isRead: 1,
    },
    {
        contact_name: "289-1445",
        time: "2018-12-20 02:53:49",
        isRead: 0,
    },
    {
        contact_name: "289-1445",
        time: "2018-12-19 02:53:49",
        isRead: 0,
    },
    {
        contact_name: "289-1445",
        time: "2018-12-19 02:54:49",
        isRead: 0,
    }
];

Use this function for sorting:

messages.sort(function(a, b){return Date.parse(a.time) - Date.parse(b.time)});

Which will output:

    [{
        contact_name: "289-1445",
        time: "2018-12-19 02:53:49",
        isRead: 0,
    },
    {
        contact_name: "289-1445",
        time: "2018-12-19 02:54:49",
        isRead: 0,
    }
    {
        contact_name: "Josef Braga",
        time: "2018-12-20 01:53:49",
        isRead: 1,
    },
    {
        contact_name: "289-1445",
        time: "2018-12-20 02:53:49",
        isRead: 0,
    }]

Then you can do the $.each. Hope this is what you wanted.

Answer 2

Luckily, your time properties are in a format that makes this easy - just call sort and use localeCompare to check which .time comes first, assuming they're always in the format YYYY-MM-DD hh:mm:ss:

var messages = [{
    contact_name: "Josef Braga",
    time: "2018-12-20 01:53:49",
    isRead: 1,
  },
  {
    contact_name: "289-1445",
    time: "2017-12-20 02:53:49",
    isRead: 0,
  },
  {
    contact_name: "289-1445",
    time: "2018-12-20 02:45:49",
    isRead: 0,
  },
  {
    contact_name: "289-1445",
    time: "2018-12-20 03:01:49",
    isRead: 0,
  },
  {
    contact_name: "289-1445",
    time: "2018-12-20 02:53:49",
    isRead: 0,
  },
];
messages.sort((a, b) => b.time.localeCompare(a.time));
console.log(messages);