Sorting array by HTML data attribute?

Question

I'm trying to learn local storage. I have five links each with a data-date attribute and I want them to be sorted using that attribute. I've tried numerous ways but nothing seems to work. From what I understand, I should parse before sorting but it didn't work for me. I must have done it wrong because I don't see how else to do it.

Here is my HTML:

<div id="div1">
    <input id='clearHistory' type='button' value='Remove All History' />
    <input id='showHistory' type='button' value='Show History' />
    <ul id='history'>
      <li>
        <a class='date' href="#aa" data-date="November 12, 2001 03:24:00">Link 1</a>
      </li>
      <li>
        <a class='date' href="#bb" data-date="August 4, 1993 03:24:00">Link 2</a>
      </li>
      <li>
        <a class='date' href="#cc" data-date="October 17, 1995 03:24:00">Link 3</a>
      </li>
      <li>
        <a class='date' href="#dd" data-date="December 1, 2010 03:24:00">Link 4</a>
      </li>
      <li>
        <a class='date' href="#ee" data-date="August 17, 2004 03:24:00">Link 5</a>
      </li>
    </ul>
  </div>

  <p>Click on 'Show History' to see the 'user history'.</p>
  <ul id='storedHistory'></ul>

And my JavaScript:

$(document).ready(function() {
  var storedHistory = document.getElementById('storedHistory');

  Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
  };

  Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
  };

  //function sortDatesAscending(a, b) { return a.valueOf() - b.valueOf(); } function sortDatesDescending(a, b) { return b.valueOf() - a.valueOf(); }

  function sortLinkDatesAscending(obj1, obj2) {
    return obj1.date.valueOf() - obj2.date.valueOf();
  }

  function sortLinkDatesDescending(obj1, obj2) {
    return obj2.date.valueOf() - obj1.date.valueOf();
  }

  var history = {
    items: []
  };

  // Get each anchor and retrieve its date and link. Add to an object and add that object to the history's array Sort by ascending. Add to local storage.
  $('ul > li > a').click(function(e) {
    var date = $(this).attr('data-date');
    var listData = {
      link: $(this).attr("href"),
      date: date
    };
    history.items.push(listData);
    window.localStorage.setObject("history", history);
  });

  /* Remove items from local storage */
  $('#clearHistory').click(function() {
    window.localStorage.clear();
  });

  /* Retrieve items from local storage and add to stored history unordered list */
  $('#showHistory').click(function() {
    console.log(window.localStorage);
    var listHistory = localStorage.getObject('history');
    var counter = 1;
    for (var i = 0; i < listHistory.items.length; i++) {
      $("#storedHistory").append('<li>' + counter + '. Link: ' + listHistory.items[i].link + '<br>' + 'Date: ' + listHistory.items[i].date + '</li>');
      counter++;
    }
  });
});

And here is the jsfiddle: https://jsfiddle.net/fLLsfd5j/2/

http://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort — Arun P Johny, Apr 12 '16 at 05:21
@ArunPJohny I've tried that link and it didn't work for me either. — nicholasdrzewiecki, Apr 12 '16 at 05:48

score 1 · Accepted Answer · answered Apr 12 '16 at 06:16

Try this for sorting! (http://trentrichardson.com/2013/12/16/sort-dom-elements-jquery/)

var $history = $('#history li'),
        $historyA = $history.children();
        $historyA.sort(function (a, b) {
            var an = Date.parse(a.getAttribute('data-date')).valueOf(),
            bn = Date.parse(b.getAttribute('data-date')).valueOf();
            if (an > bn) {
                return 1;
            }
            if (an < bn) {
                return -1;
            }
            return 0;
        });
        $('#history').empty();
        $.each($historyA, function () {
            $('#history').append($('<li>').html(this));
        });

Redu · Answer 2 · 2016-04-12T09:18:28.110

I guess this should do your job

function getHistory(){
  var as = document.querySelectorAll(".date"); // get elements with date class
  Array.prototype.map.call(as, e => e.cloneNode(true)) //clone them into an array and sort
                 .sort((p,c) => Date.parse(p.dataset.date)<=Date.parse(c.dataset.date) ? -1 : 1)
                 .forEach((e,i) => as[i].parentNode.replaceChild(e, as[i]));
}
showHistory.onclick = getHistory; //add "click" eL to the DOM element with showHistory id

http://jsbin.com/yoraqusora/2/edit?js,console,output

Sorting array by HTML data attribute?

2 Answers2