Сортировка 2 разных списков элементов в JavaScript по значению (Имя и Фамилия)

Question

Мне нужна помощь. У меня есть многомерный массив, содержащий подмассив длиной 2 ["name", "фамилия"] в виде строкового значения с заглавной первой буквой.

Запрос состоит в том, чтобы показать первые 10 элементов массив при загрузке окна. После этого я использую кнопку, которая загружает еще 10 элементов при каждом нажатии. Эта функция работает безупречно.

У меня 2 проблемы: -У меня 2 кнопки, сортировка по имени и сортировка по фамилии. Вы правильно догадались. Если нажата btn «сортировка по имени», вы должны отсортировать элементы по имени, и наоборот, если нажата «сортировка по фамилии».

Следующие функции работают хорошо. Сортировать имя и фамилию. Проблема в том, что при сортировке имени фамилия должна следовать за именем в правильном месте. Теперь я могу отсортировать как имя, так и фамилию, и в результате получим другие полные имена после сортировки.

-Второй проблемой, если мы исправим первый, является то, что если я загружаю 10 или более элементов (нажав "загрузить больше" btn) Мне нужно нажать sort btn, чтобы отсортировать их. Я думаю, что я должен отсортировать исходные массивы, а затем начать получать элементы из отсортированного списка. Но как мне отсортировать массив с подмассивом [«Имя», «Фамилия»]? Заранее спасибо

function sortByName(e) {
  e.preventDefault();

  let itemList = document.getElementById('item-list-two').children;
  let names = [];
  const itemListArray = Array.from(itemList);

  for (let i = 0; i < itemListArray.length; i++) {
    names.push(itemListArray[i].innerText.toUpperCase());
    names.sort();
  }

  for (let i = 0; i < itemList.length; i++) {
    itemList[i].textContent = names[i].charAt(0) + names[i].slice(1).toLowerCase();
  }
}

function sortBySurname(e) {
  e.preventDefault();

  let itemList = document.getElementById('item-list-three').children;
  let surnames = [];
  const itemListArray = Array.from(itemList);
  for (let i = 0; i < itemListArray.length; i++) {
    surnames.push(itemListArray[i].innerText.toUpperCase());
    surnames.sort();
  }

  for (let i = 0; i < itemList.length; i++) {
    itemList[i].textContent = surnames[i].charAt(0) + surnames[i].slice(1).toLowerCase();
  }
}

Answer 1

Вот простой пример - как вы можете видеть, когда имя отсортировано, фамилия следует за именем в правильном месте. Чтобы отсортировать многомерный массив, такой как ["Name","Surname"], вам просто нужна функция сравнения, которая проверяет значения для элемента в позиции 1 и сортирует на основе этого значения. например,

const names = [
  ["Alice", "Smith"],
  ["Bob", "Jones"],
  ["Eve", "Chatz"],
  ["Alice", "Fynn"],
  ["Alison", "Marks"]
];

const $ = (id) => document.getElementById(id);

function compareSurname(a, b) {
  if (a[1] < b[1]) {
    return -1;
  }

  if (a[1] > b[1]) {
    return 1;
  }

  return 0;
}


function log(m) {
  $("log").innerHTML = "";
  m.forEach(x => $("log").innerHTML += `${x}\n`)
}

$("name").addEventListener("click", () => log(names.sort()));
$("surname").addEventListener("click", () => log(names.sort(compareSurname)));
window.addEventListener('DOMContentLoaded', () => log(names));

Name
Surname

Чтобы помочь с загрузкой новых данных, потребуется дополнительная информация!