async/await pobieranie danych na przycisk

0

Jak na przycisk pobrac dane i wyświetlic je na stronie w poprawny sposób? Ogólnie niby działa, ale listData tworzy mi ciągle nowe tablice więc bez sensu. Proszę o pomoc
HTML:

<body>
<div id="h1"></div>
<button>Klik</button
</body>

js

const btn = document.querySelector('button')
const h1 = document.getElementById('h1')
const URL = '.....'

async function handleClick  ()  {
    const response = await fetch(URL)
    const data = await response.json();
    const listData= data.map(list => list.name);
    h1.innerHTML = listData.map(user => (
        `<div>
          <div>Name: ${user}</div> 
        </div>`
    ))

}

btn.addEventListener('click',handleClick)
1

listData tworzy mi ciągle nowe tablice więc bez sensu

Dlaczego bez sensu?

Jak na przycisk pobrac dane i wyświetlic je na stronie w poprawny sposób?

Twoje rozwiązanie wygląda prawidłowo; zgaduję, że najbliższym następnym krokiem byłoby wykorzystanie jakiejś biblioteki (Vue) albo frameworka (Angular, React) :-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1