Сортировка fetch

let wineList;
 
document.getElementById('sort_by_name').addEventListener('click', sortList);  // 1
document.getElementById('sort_by_rating').addEventListener('click', sortRating)
 
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 wineList) {
        htmlStr += wine.wine + ' ' + wine.rating.average +'<br/>';
    }
 
    wineDataEl.innerHTML = htmlStr;
}
 
function sortList() {    // 4
    if (wineList) {
        wineList.sort((a, b) => a.wine.localeCompare(b.wine)) ;
        display(wineList);   // 3
    }
}
 
function sortRating() {
    if (wineList) {
        wineList.sort((a,b) => a.rating.average.localeCompare(b.rating.average))
        display(wineList)
    }
}

function sortList() {
  if (wineList) {
    const wineListSorted = [...wineList];
    wineListSorted.sort((a, b) => a.wine.localeCompare(b.wine));
    display(wineListSorted); 
  }
}
//sortRating переписать аналогично

function display(list) {
  const wineDataEl = document.getElementById("wine_data");
  let htmlStr = "";
 
  for (const wine of list) {
    htmlStr += wine.wine + " r: " + wine.rating.average + "<br/>";
  }
  wineDataEl.innerHTML = htmlStr;
}