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

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

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

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

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

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

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();
  }
}

javascript arrays sorting htmlcollection
person Vas Chatz    schedule 06.04.2020    source источник
comment
Добро пожаловать в StackOverflow! Чтобы получить ответ, вы должны предоставить минимальный воспроизводимый пример (reprex) stackoverflow.com/help/minimal-reproducible-example - так как недостаточно информации, чтобы помочь. Например, что такое item-list-two и item-list-three, а также где/как вы загружаете данные?   -  person Fraser    schedule 06.04.2020
comment
sort — это функция более высокого уровня в js. Вы найдете примеры в руководстве   -  person Christian    schedule 06.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вот простой пример - как вы можете видеть, когда имя отсортировано, фамилия следует за именем в правильном месте. Чтобы отсортировать многомерный массив, такой как ["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));
<button type=button id=name>Name</button>
<button type=button id=surname>Surname</button>
<pre id=log></pre>

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

person Fraser    schedule 06.04.2020