<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>list</title>
    </head>

    <body>
        <div id="doc-list">
        </div>

        <script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script>
        <script>
            axios.get('/api/list').then(({ data }) => {
                console.log(data);
                const el = document.getElementById('doc-list');
                for (const doc of data) {
                    let p = document.createElement('p');
                    p.innerText = `${doc.artist} - ${doc.title} by ${doc.credit}`;
                    el.insertAdjacentElement('beforeend', p);

                    let charts = document.createElement('ul');
                    for (const chart of doc.charts) {
                        let l = document.createElement('li');
                        l.innerText = `${chart.difficulty} ${chart.rating} - ${chart.name}`
                        charts.insertAdjacentElement('beforeend', l);
                    }
                    el.insertAdjacentElement('beforeend', charts);
                }
            });
        </script>
    </body>

</html>