JS сортировка: не меняются выводимые элементы

Question

JS сортировка: не меняются выводимые элементы

Рейтинг: 0Ответов: 1Опубликовано: 05.02.2023

Мне нужна ваша помощь. У меня есть объект с наполненным внутри массивом:

let arrayData = { data: [
    { user: "mike@mail.com", rating: 20, disabled: false },
    { user: "greg@mail.com", rating: 14, disabled: false },
    { user: "john@mail.com", rating: 25, disabled: true }  ]
}

С помощью select option, я стараюсь сортировать мой внутренний массив по всем ключам, которые есть в объекте массива. Также я вывожу все элементы массива на страницу. Код работает почти хорошо, сортировка массива у меня происходит.

let select = document.querySelector('#selectToSort');
let noSortOption = document.createElement('option');

noSortOption.innerText = 'No sort'
noSortOption.value = 'no_sort'
noSortOption.selected = true;
select.appendChild(noSortOption);

let select = document.querySelector('#selectToSort');
let elementObjectKeys, divElementText;

for (let elements of arrayData.data) {
     elementObjectKeys = Object.keys(elements);
     divElementText = document.createElement('div');
     divElementText.innerText = `${elements.user} + ${elements.rating} + ${elements.disabled}`
     document.body.appendChild(divElementText);
     select.addEventListener('change', sortByValue)
}

for (let keyToSort of elementObjectKeys) {
   let option = document.createElement('option');
   option.innerText = keyToSort;
   select.appendChild(option);
}

function sortByValue() {
   if (select.value === 'user') {
       arrayData.data.sort((a,b) => {
           return ('' + a.user).localeCompare(b.user);
       });
       setNewList(arrayData.data)
   } else if (select.value === 'rating') {
       arrayData.data.sort((a,b) => {
           return a.rating - b.rating
       });
       setNewList(arrayData.data)
   } else if (select.value === 'disabled') {
       arrayData.data.sort((a,b) => {
           return (a === b)? 0 : a? -1 : 1;
       });
       setNewList(arrayData.data)
   }
}

function setNewList(value) {
   for (let element of value) {
       divElementText.innerText = `${element.user} - ${element.rating} - ${element.disabled}`
   }
}

Проблема заключается в том, что на странице, во время сортировки, меняется только последний элемент, а первые 2, которые были к сортировке выведены, не заменяются.

Пожалуйста, скажите в чем моя проблема: почему при сортировке на странице заменяется только последний элемент, а 2 первых нет? Спасибо вам большое

HTML

<select id="selectToSort"></select>

javascript сортировка

Источник: Stack Overflow на русском

Answer 1

▲ 0

Исправить сортировку можно так:

const arrayData = { data: [
      { user: "mike@mail.com", rating: 20, disabled: false },
      { user: "greg@mail.com", rating: 14, disabled: false },
      { user: "john@mail.com", rating: 25, disabled: true }  ]
  }

  const select = document.querySelector('#selectToSort');

  for (let keyToSort of Object.keys(arrayData.data[0])) {
    const option = document.createElement('option');
    option.innerText = keyToSort;
    select.appendChild(option);
  }

  const area = document.getElementById('sortData');

  function paint() {
    area.innerHTML = '';
    for (let elements of arrayData.data) {
      const divElementText = document.createElement('div');
      divElementText.innerText = `${elements.user} + ${elements.rating} + ${elements.disabled}`
      area.appendChild(divElementText);
    }
  }
  paint();

  select.addEventListener('change', sortByValue)

  function sortByValue() {
    switch (select.value) {
      case 'user':
        arrayData.data.sort((a, b) => {
          return ('' + a.user).localeCompare(b.user);
        });
        break;
      case 'rating':
        arrayData.data.sort((a, b) => {
          return a.rating - b.rating
        });
        break;
      case 'disabled':
        arrayData.data.sort((a, b) => {
          return (a === b) ? 0 : a ? -1 : 1;
        });
    }
    paint();
  }

<select id="selectToSort">
</select>
<div id="sortData"></div>

JS сортировка: не меняются выводимые элементы

Ответы