JSFiddle - React, Tailwind, and code Playground

by Le Huynh Anh Tien

HTML

<div id="data"></div>

JavaScript

var movies = [
    {title: 'The Shawshank &spades; 0 ', rating: 9.2, release: '2018/12/10 12:00:00'},
    {title: 'The Shawshank &spades; 1', rating: 9.0, release: '2018/11/11 12:00:00'},
    {title: 'The Shawshank &#9824; 2', rating: 9.3, release: '2018/08/10 13:00:00'},
    {title: 'The Shawshank &#9730; 3', rating: 9.2, release: '2018/07/15 08:00:00'},
    {title: 'The Shawshank &spades; 4', rating: 8.3, release: '2018/10/10 07:00:00'},
    {title: 'The Shawshank &spades; 5', rating: 7.3, release: '2018/09/12 12:00:00'},
];

// datetime desc
/* movies.sort(function(a, b) {
    var dateA = new Date(a.release), dateB = new Date(b.release);
    return dateB - dateA;
}); */

// datetime asc
/* movies.sort(function(a, b) {
    var dateA = new Date(a.release), dateB = new Date(b.release);
    return dateA - dateB;
});
 */


// Sring desc
/* movies.sort(function(a, b) {
    var titleA = b.title.toLowerCase(), titleB = a.title.toLowerCase();
    if (titleA < titleB) return -1;
    if (titleA > titleB) return 1;
    return 0;
});
 */
 
// Sring asc
/* movies.sort(function(a, b) {
    var titleA = a.title.toLowerCase(), titleB = b.title.toLowerCase();
    if (titleA < titleB) return -1;
    if (titleA > titleB) return 1;
    return 0;
}); */

// string sort with unicode character
/* movies.sort(function(a,b){
    return a.title.localeCompare(b.title);
})
 */
 
 // number desc
/*  movies.sort(function(a, b) {
    return b.rating - a.rating;
 });
 */
 
 
// number asc
/* movies.sort(function(a, b) {
    return a.rating - b.rating;
}); */
  
 
var html = ''; 
for (var i = 0; i < movies.length; i++) {
	html += '<p>' + movies[i].title + ' ' 
  							+ movies[i].rating + ' ' 
                + movies[i].release + '</p>';
}

document.querySelector("div").innerHTML = html;