Necesito tu ayuda. Con la ayuda de fetch, obtengo los datos e inmediatamente los dibujo. En el botón quiero que se ordenen estos datos, sin embargo recibo un error. ¿Qué estoy haciendo mal?
<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 , pero también puede aprender a usar .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>