使用 fetch 对数据进行排序答案

【问题标题】：Sorting data with fetch使用 fetch 对数据进行排序
【发布时间】：2022-01-07 01:28:43
【问题描述】：

我需要你的帮助。在 fetch 的帮助下，我得到数据并立即绘制它们。在按钮上，我希望对这些数据进行排序，但是我收到一个错误。我做错了什么？

<button id="sort_by_name">Sort</button>

JavaScript

fetch(`https://api.sampleapis.com/wines/reds`)
.then(response => response.json())
.then(data => {
    for (let i = 0; i <= 25; i++) {
        let vino = data[i]
        let a = document.getElementById('sort_by_name');
        a.addEventListener('click', () => {
            data.sort((a,b) => a.wine - b.wine)
        })
        document.write(`<div>${vino.wine}</div>`)
    }
})

【问题讨论】：

“我收到错误”是什么意思？什么错误？
你做事的顺序太混乱了，我不知道从哪里开始。认真考虑一下您希望发生什么，希望这些事情何时发生，以及您希望每件事发生多少次。
另见：stackoverflow.com/questions/802854/…
你不应该把 getElementById() 和 addEventListener() 代码放在循环里面我认为它应该在 for 循环之外。你也应该发布你的错误。

标签： javascript sorting fetch

【解决方案1】：

为按钮添加点击监听器。
获取数据，并将其存储在变量中。
显示数据。最简单的方法是使用.innerHTML，但您也可以学习如何使用.appendChild。
要对列表进行排序，请使用.localeCompare。

let wineList;

document.getElementById('sort_by_name').addEventListener('click', sortList);  // 1

fetch(`https://api.sampleapis.com/wines/reds`)
.then(response => response.json())
.then(data => {
  if (data) {
    wineList = data;     // 2
    display(wineList);   // 3
  }
})

function display(list) { // 3
  const wineDataEl = document.getElementById('wine_data');
  let htmlStr = '';
  
  for (const wine of list) {
    htmlStr += wine.wine + '<br/>';
  }
  
  wineDataEl.innerHTML = htmlStr;
}

function sortList() {    // 4
  if (wineList) {
    wineList.sort((a, b) => a.wine.localeCompare(b.wine)) ;
    display(wineList);   // 3
  }
}

<button id="sort_by_name">Sort</button>

<div id="wine_data">Loading...</div>

【讨论】：