javascript - 在普通 JS 中访问索引

Question

所以我正在构建一个看似简单的带有rails后端的播放列表JS应用程序，我遇到了一个问题。我似乎无法获得我想要的返回值。我渲染了我的曲目和播放列表，但我需要获取页面上每首歌曲的索引，我只能弄清楚如何获取第一首曲目。我是 JS 的新手，你可能会说，所以你有任何建议都会很棒。提前致谢。

    function getPlaylists() {
  fetch(BACKEND_URL)
      .then(response => response.json())
      .then(list  => {
       list.data.map((playlist, index)  =>  {      
          let newPlaylist = new Playlist(playlist, playlist.attributes) ;       
          
         document.getElementById('playlist-container').innerHTML += newPlaylist.renderPlaylistCard();         
        })       
        }
  )
}

function postFetch(title, artist){
    fetch(BACKEND_URL, {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({
        name: name,
        title: title, 
        artist: artist
      })      
    })    
    .then(response => response.json())
    .then(playlist => {          
      const playlistData = playlist.data;      
      let newPlaylist = new Playlist(playlistData, playlistData.attributes);
    
      document.getElementById('playlist-container').innerHTML += newPlaylist.renderPlaylistCard() ;
   
    })  
  }
```class Playlist {
 
  constructor(playlist, playlistAttributes) {    

     this.id = playlist.id
     this.name = playlistAttributes.name  
     this.track = playlistAttributes.tracks
     Playlist.all.push(this);  
 //debugger
}

renderPlaylistCard() {
  return   `            
   <div data-id=${this.id}>
   <h3><li>Playlist Name: ${this.name}</h3></li> 
   <h3><li>Title: ${this.track[0].title}</h3></li> 
   <h3><li>Title: ${this.track[0].artist}</h3></li> 
   <button data-id=${this.id}>EDIT!</button>    
   </div> </li>
   ` ;  
    }
    }  

    Playlist.all = [];

标签： javascriptindexingrails-api