<!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>