How to sort a multidimensional array using items in Javascript

Question

Basically all I want is to sort this array based on each item that is shown below, with the exception of the "Action' and 'Thumb Image' ones. So the way I have it set up is that the header for each of rows is a link, and when that link is clicked the list will be sorted based on what was clicked. So for example, if Title is clicked, then I want to have a "titleSort()" function that will sort based on title. I have no idea how to accomplish this, so any help is much appreciated. I was hoping that VideoList.sort(Title) would work, for example.

Thanks,

JS

for(var i = 0; i<VideoList.length; i++) {
    content += "<tr>";
    content += "<td width='20%'><a href='https://www.youtube.com/watch?v=" + VideoList[i].VideoID + "'onclick='playVideo("+i+")'>" + "<img src ='https://i.ytimg.com/vi/" + VideoList[i].VideoID + "/hqdefault.jpg' width=175 height=130></a></td>";
        content += "<td>" + VideoList[i].Title + "</td>";
        content += "<td>" + VideoList[i].VideoID + "</td>";
        content += "<td>" + VideoList[i].DateUploaded + "</td>";
        content += "<td>" + VideoList[i].Category+ "</td>";
        content += "<td>" + VideoList[i].Time+ "</td>";
        content += "<td width='20%'>" + VideoList[i].Action + "</td>";
        content += "</tr>";

This is not a multi-dimensional array. It's an array of objects. — , Dec 10 '15 at 06:46

score 1 · Answer 1 · answered Dec 10 '15 at 05:25

1

You can use sort to sort VideoList according to title this code may work for you

VideoList.sort(function(a,b){
        return a.Title  > b.Title;
    });

answered Dec 10 '15 at 05:25

Mahmudur Rahman

745
5
13

The callback to `sort` needs to return +1, 0, or -1. – Dec 10 '15 at 06:45

maček · Answer 2 · 2016-04-22T11:17:55.937

Here's a generic function for you

function sortBy(list, field) {
  return list.sort(function(a,b) {
    return a[field] < b[field];
  });
}

sortBy(VideoList, 'Title');

Warning: sortBy will mutate the list input

You could also make it take a comparator so you control the 'direction' of the sort

// you you need to return -1, 0, or 1 for the sort to work reliably
// thanks, @torazaburo
function compareAsc(a,b) {
  if (a < b)      return -1;
  else if (a > b) return 1;
  else            return 0;
}

function compareDesc(a,b) {
  return compareAsc(a,b) * -1;
}

function sortBy(list, field, comparator) {
  return list.sort(function(a,b) {
    if (comparator instanceof Function)
      return comparator(a[field], b[field]);
    else
      return compareAsc(a[field], b[field]);
  });
}

// default sort ascending
sortBy(VideoList, 'Title');

// sort descending
sortBy(VideoList, 'Title', compareDesc);

This will not behave reliably unless you return -1, 0, or +1. — , Dec 10 '15 at 06:45
@torazaburo thanks for the comment. I missed it until now, but I wrote an update to fix the issue. — maček, Apr 22 '16 at 11:18

score 0 · Answer 3 · answered Dec 10 '15 at 06:02

I agree with @manishrw about lodash. AND any number of libraries would make this easier - like jQuery and Angular. There are a ton of table-specific libraries out there that have sort function built in. However, I built it to show how you could do it, including re-building the table once it's sorted. To do that I had to create the array with mock data. Here's a jsfiddle:

https://jsfiddle.net/mckinleymedia/c02nqdbz/

And here's the code:

<div id="target"></div>
<script>
var VideoList = [],
  content,
  fields = ["Title", "VideoID", "DateUploaded", "Category", "Time", "Action"],
  num = 10,
  sortField = "Title",
  sortDirection = 1,
  compare = function(a, b) {
    if (a[sortField] < b[sortField]) return -1 * sortDirection;
    if (a[sortField] > b[sortField]) return 1 * sortDirection;
    return 0;
  },
  sortArray = function(field) {
    if( sortField === field ) sortDirection = -1 * sortDirection;
    sortField = field;
    VideoList.sort(compare);
    buildTable();
  },
  creatVideos = function() {
    for (var x = 0; x < num; x++) {
      var video = {},
        z = Math.floor(Math.random() * 200);
      for (var i in fields) {
        if(fields[i]==='VideoID') {
        video[fields[i]] = z;
        } else {
        video[fields[i]] = fields[i] + "-" + z;
        }
      }
      VideoList.push(video);
    }
  },
  buildTable = function() {
    content = "<table>";
    content += "<tr>";
    content += "<th>image</th>";
    for (var x in fields) {
      content += "<th class='field field-" + fields[x] + "' onclick='sortArray(\"" + fields[x] + "\")'>" + fields[x] + "</th>";
    }
    content += "</tr>";
    for (var i in VideoList) {
      content += "<tr>";
      content += "<td width='20%'><a href='https://www.youtube.com/watch?v=" + VideoList[i].VideoID + "'onclick='playVideo(" + i + ")'>" + "<img src ='https://i.ytimg.com/vi/" + VideoList[i].VideoID + "/hqdefault.jpg' width=175 height=130></a></td>";
      for (var x in fields) {
        content += "<td>" + VideoList[i][fields[x]] + "</td>";
      }
      content += "</tr>";
    }
    content += "</table>";
    document.getElementById('target').innerHTML = content;
  };

creatVideos();
buildTable();
</script>

score -1 · Answer 4 · answered Dec 10 '15 at 05:29

-1

Use Lodash library. It's easy to use and efficient in run-time. It has a function sortBy, which can be used to sort a collection based on they key you provide.

P.S. Lodash is my goto Library for any operation to be performed on any collection.

answered Dec 10 '15 at 05:29

manishrw

429
5
17

1

Thanks, Lodash solved my problem – Rjun Dec 15 '15 at 13:49

How to sort a multidimensional array using items in Javascript

4 Answers4