I'm trying to get the stuff in my api to show up in the DOM. I keep getting an undefined but I know it's there. It shows up in my console. I just don't know what other extra things I need to do when the objects I want are nested into another array and how would I even get that onto the DOM.
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('songs').addEventListener('click', getSongs)
//getSongs()
})
function getSongs() {
let info = document.getElementById('info')
let songList = document.getElementById('song-list')
//info.innerHTML = ""
songList.innerHTML = ""
fetch('https://itunes.apple.com/search?term=K-Pop')
.then(resp => resp.json())
.then(data => {
data.results.map(song => {
//console.log(song)
songList.innerHTML += `
<li>
<a href="#" data-name="${song.trackName}"
data-id="${song.trackId}"> ${song.trackName} </a>
</li>
`
})
attachLinks()
})
}
function attachLinks() {
const songs = document.querySelectorAll('li a')
songs.forEach(song => {
song.addEventListener('click', displaySong)
})
}
function displaySong(event) {
console.log(event.target)
let songList = document.getElementById('song-list')
let info = document.getElementById('info')
/*songList.innerHTML = `<h1>Song Name:</h1>
<p>${event.dataset.trackName}</p>
<h2>Artist Name:</h2>
<p>${event.dataset.artistName}</p>
<h3>Release Date:</h3>
<p>${event.dataset.releaseDate}</p>`*/
songList.innerHTML = ""
info.innerHTML = ""
fetch(`https://itunes.apple.com/search?term=K-Pop/${event.target.dataset.id}`)
.then(resp => resp.json())
.then(song => {
//console.log(song)
info.innerHTML += `
<h1>${song.trackName}</h1>
<h3>Artist Name: </h3>
<p>${song.artistName}</p>
<h3>Release Date: </h3>
<p>${song.releaseDate}</p>
`
})
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Music</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<h1>Music</h1>
<h2 id='input'>K-Pop</h2>
<button id="songs">All songs</button>
<hr>
<br>
<div id="main">
<ul id="song-list">
</ul>
<div id="info">
</div>
</div>
<script src="index.js"></script>
</body>
</html>this is what all the data from the api looks like enter image description here
