如何在javascript中对数据进行排序？答案

【问题标题】：How to sort data in javascript?如何在javascript中对数据进行排序？
【发布时间】：2022-11-23 05:51:01
【问题描述】：

我做了一个小数据列表，其中包含一些有关国家的信息（名称、首都、地区和人口），所有国家都按次区域分组。在标题部分，我有四个位置描述每一列（姓名、首都、地区和人口）。我想添加排序功能，以便在单击标题部分中的位置后，数据将按该位置排序。例如，在单击一次名称后，数据应按名称（升序或降序）排序，然后在再次单击名称后，数据应按与之前的排序相反的顺序排序。我想允许同时按几列排序，因此例如在单击首都和地区后，数据应按首都和地区排序。这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button onclick="f(1)">here</button>
    <main class="container">
        <header>
            <div id="name">
                <h1>Name</h1>
            </div>
            <div id="capital">
                <h1>Capital</h1>
            </div>
            <div id="population">
                <h1>Population</h1>
            </div>
            <div id="area">
                <h1>Area</h1>
            </div>

        </header>

      
      <div id="container"></div>
      <div id="subRegionWrapper"> </div>
      <div id="listWrapper"></div>
      <script src="script.js"></script>
    </main>
</body>

</html>

body {
  margin: 0 15%;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
    font-family: 'Open Sans', Arial;
    font-size: 18px;
}
header{
  margin: 0 10%;
    display:flex;
    justify-content: space-between;
    padding: 22px 0;
    color:rgb(5, 5, 5);
}
ul {
    list-style: none;
    list-style-type: none;
    outline: 2px solid #ddd;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    list-style-position: inside;
    color: blue;
}

ul ol { 
    color: rgb(197, 105, 18);
    list-style: none;
    list-style-type: none;
    font-size: .9em;
    margin: 0.4rem 0;
}
.country{
    display: flex;
    justify-content: space-between;
}
.disp-flex{
    display:flex;
    justify-content: space-between;
}

.disp-flex > div{
    width:23%;
    padding:15px 0px;
}


.subregion-header>div:nth-child(1){
    position: relative;
    left:30px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 15px 2px;
}

.accordion li {
  list-style-type: none;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  margin-left: 5%;
  display: none;
  background-color: white;
  overflow: hidden;
}

let div = document.createElement('div');
let ul = document.createElement('ul');

const data = {};

const el = document.getElementById("name");
el.addEventListener("click", g);
function g(){
  f(1);
}

div.appendChild(ul);
async function f(e) {
  //fetching and sorting data by regions and subregions
  const res = await fetch("https://restcountries.com/v3.1/all");
  const data = await res.json();
  data.sort((a, b) => {
    if (a.region > b.region) return 1;
    else if (a.region < b.region) return -1
    else {
      if (a.subregion > b.subregion) return 1;
      else return -1;
    }
  });

  if(e){
    console.log(e==1);

    data.sort((a, b) => {
      if (a.name > b.name) return 1;
      else return -1
    });
  }

  const container = document.getElementById('container');
  const accordion = document.createElement('div');
  const olWrapper = document.getElementById('listWrapper');
  const subRegionWrapper = document.getElementById('subRegionWrapper');

  const subRegions = data.reduce((r, a) => {
    r[a.subregion] = r[a.subregion] || [];
    r[a.subregion].push(a);
    return r;
  }, {});

  const dropdownValues = Object.entries(subRegions);
  dropdownValues.forEach(subRegion => {
    const accordionWrapper = document.createElement('div');
    const panel = document.createElement('div');
    panel.classList.add('panel');
    accordionWrapper.classList.add('accordion');

    const totalArea = subRegion[1].reduce((acc, curr) => acc + curr.area, 0);
    const totalPopulation = subRegion[1].reduce((acc, curr) => acc + curr.population, 0);
    const li = createSubregion(subRegion[0], totalPopulation, totalArea);

    accordionWrapper.appendChild(li);
    accordion.appendChild(accordionWrapper);
    console.log(subRegion[1])
    subRegion[1].forEach(item => {
      const subLi = createCountry(item.name.common, item.capital, item.area, item.population);
      const subOl = document.createElement('ol');
      subOl.appendChild(subLi);
      panel.appendChild(subOl);
      accordion.appendChild(panel);
    });

    accordionWrapper.addEventListener('click', function () {
      this.classList.toggle("active");
      const panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  });

  container.appendChild(accordion);
}

function createSubregion(name, population, area) {
  var li = document.createElement("li");
  li.setAttribute("class", "subregion");

  var header = document.createElement("div");
  header.setAttribute("class", "subregion-header disp-flex");

  var nameDiv = document.createElement("div");

  var nameh2 = document.createElement("h2");
  nameh2.innerText = name;

  nameDiv.appendChild(nameh2);
  header.append(nameDiv);

  var emptyDiv = document.createElement("div");
  header.appendChild(emptyDiv);

  var populationDiv = document.createElement("div");
  var populationh2 = document.createElement("h3");
  populationh2.innerText = population;

  populationDiv.appendChild(populationh2);
  header.append(populationDiv);

  var areaDiv = document.createElement("div");
  var areah2 = document.createElement("h3");
  areah2.innerText = area;

  areaDiv.appendChild(areah2);
  header.append(areaDiv);

  li.appendChild(header);
  return li;
}

function createCountry(name, capital, area, population) {
  var country = document.createElement("li");
  country.setAttribute("class", "country disp-flex")

  var namediv = document.createElement("div");
  var nameh4 = document.createElement("h4");
  nameh4.innerText = name;
  namediv.appendChild(nameh4);
  country.appendChild(namediv);

  var capitaldiv = document.createElement("div");
  var capitalh4 = document.createElement("h4");
  capitalh4.innerText = capital;
  capitaldiv.appendChild(capitalh4);
  country.appendChild(capitaldiv);

  var popdiv = document.createElement("div");
  var poph4 = document.createElement("h4");
  poph4.innerText = population;
  popdiv.appendChild(poph4);
  country.appendChild(popdiv);

  var areadiv = document.createElement("div");
  var areah4 = document.createElement("h4");
  areah4.innerText = area;
  areadiv.appendChild(areah4);
  country.appendChild(areadiv);


  return country;
}

f();

我尝试以不同的方式进行排序（添加额外的函数，将参数传递给主函数等）但不幸的是没有任何效果。我真的很挣扎，我将非常感谢任何帮助。

【问题讨论】：

请用“无效果”的含义更新您的问题 - 数据是否未排序，用户界面是否未更新等。还提供一些示例数据

标签： javascript html sorting html-lists html-datalist

【解决方案1】：

您的代码实际上可以正常工作，但您没有删除旧表。因此，新的排序条目将附加到已经存在的条目上。您应该以某种方式清除表格，例如：

const container = document.getElementById('container');

var child = container.lastElementChild; 
while (child) {
    container.removeChild(child);
    child = container.lastElementChild;
}

把它放在函数 f(e) 中的容器位置，它应该可以正常工作

【讨论】：