Why are there elements in my array but when I try to access them they are undefined?

Question

I have been working with the Spotify API and I am trying to make a playlist. I populate an array with 20 songs but when I try to access the elements in this array they are all undefined.

makeArtistPlaylist() {
  let playlistName = "Top Artist Playlist"
  if (this.state.topArtists.length > 0) {
    for (let i = 0; i < 20; i++){
        let random = Math.floor(Math.random() * 10);
        spotifyApi.getArtistTopTracks(this.state.topArtists[i].id, 'from_token')
          .then((response) => {
            this.state.artistPlaylist[i] = response.tracks[random];
          })
    }
  }
  console.log(this.state.artistPlaylist)

The debugger shows me the following

[]
0:
album: {album_type: "album", artists: Array(1), external_urls: {…}, href: "https://api.spotify.com/v1/albums/3DNQrMjvVGiueVrj1qquJd", id: "3DNQrMjvVGiueVrj1qquJd", …}
artists: [{…}]
disc_number: 1
duration_ms: 223400
explicit: true
external_ids: {isrc: "USUM71814497"}
external_urls: {spotify: "https://open.spotify.com/track/7nDFTHHwfe32a8qdp9XqPy"}
href: "https://api.spotify.com/v1/tracks/7nDFTHHwfe32a8qdp9XqPy"
id: "7nDFTHHwfe32a8qdp9XqPy"
is_local: false
is_playable: true
name: "False Confidence"
popularity: 73
preview_url: "https://p.scdn.co/mp3-preview/8887b64bfe0edc29dd0b6888c59f312643d9cdaa?cid=bb4456ae310c4a6b9122ec42a843d2d7"
track_number: 1
type: "track"
uri: "spotify:track:7nDFTHHwfe32a8qdp9XqPy"
__proto__: Object
1: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 205686, explicit: false, …}
2: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 237760, explicit: false, …}
3: {album: {…}, artists: Array(3), disc_number: 1, duration_ms: 165977, explicit: true, …}
4: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 292093, explicit: true, …}
5: {album: {…}, artists: Array(2), disc_number: 1, duration_ms: 190016, explicit: true, …}
6: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 211453, explicit: false, …}
7: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 235720, explicit: false, …}
8: {album: {…}, artists: Array(3), disc_number: 1, duration_ms: 189600, explicit: false, …}
9: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 188066, explicit: false, …}
10: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 191146, explicit: true, …}
11: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 224866, explicit: false, …}
12: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 202546, explicit: false, …}
13: {album: {…}, artists: Array(2), disc_number: 1, duration_ms: 273903, explicit: true, …}
14: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 255470, explicit: false, …}
15: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 275560, explicit: false, …}
16: {album: {…}, artists: Array(2), disc_number: 1, duration_ms: 225644, explicit: false, …}
17: {album: {…}, artists: Array(2), disc_number: 1, duration_ms: 299333, explicit: true, …}
18: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 222213, explicit: false, …}
19: {album: {…}, artists: Array(1), disc_number: 1, duration_ms: 265813, explicit: false, …}
length: 20

I can see that there are elements in there but when I try to access artistPlaylist[0] I get that it is undefined.

Any help would be great.

Thank you.

I see `this.state` in there, are you using react? If so, you need to set the state instead of modifying it. — Jason Goemaat, May 14 '20 at 03:20
Related [weird-behavior-with-objects-console-log](https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log). The object you inspect in console is actually being updated from an empty object **after** you do the `console.log()` when the asynchronous operation completes — charlietfl, May 14 '20 at 03:27

Why are there elements in my array but when I try to access them they are undefined?

0 Answers0