Как отсортировать многомерный массив с помощью элементов в Javascript

Question

В основном все, что я хочу, это отсортировать этот массив на основе каждого элемента, который показан ниже, за исключением «Action» и «Thumb Image». если он настроен, то заголовок для каждой из строк является ссылкой, и когда эта ссылка будет нажата, список будет отсортирован в зависимости от того, что было нажато. Так, например, если нажата кнопка «Название», я хочу иметь «titleSort»() ", которая будет сортироваться на основе заголовка.Я не знаю, как это сделать, поэтому любая помощь очень ценится. Я надеялся, что VideoList.sort (Title) будет работать, например.

Спасибо,

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>"; 

Answer 1

Вы можете использовать sort сортировать VideoList согласно title этому код может работать для вас

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

Answer 2

использование Lodash библиотеки. Он прост в использовании и эффективен во время выполнения. Он имеет функцию sortBy, которая может использоваться для сортировки коллекции на основе ключа, который вы предоставляете.

P.S. Lodash - это моя библиотека goto для любой операции, которая будет выполняться в любой коллекции.

Answer 3

Вот общая функция для вас

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

sortBy(VideoList, 'Title'); 

Предупреждение:sortBy будет мутировать list вход

---

Вы также можете сделать это взять компаратор, чтобы вы контролировать «направление» в сортировка

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

Answer 4

Я согласен с @manishrw о lodash. И любое количество библиотек сделает это проще - например, jQuery и Angular. Там есть тонна библиотек, специфичных для таблицы, которые имеют встроенную функцию сортировки. Однако я построил ее, чтобы показать, как вы можете это сделать, включая повторное построение таблицы после ее сортировки. Для этого мне пришлось создать массив с макетными данными. Вот jsfiddle:

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

А вот код:

<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>