I need your help. With the help of fetch, I get the data and immediately draw them. On the button I want this data to be sorted, however I receive an error. What am I doing wrong?
<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>`)
}
})
.innerHTML but you could also learn how to use .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>