title: How to access Flask session variables in HTML?
body: <p>I am trying to build a JavaScript function that will build the appropriate embed link for a specified user playlist in Spotify. </p>
  
  <p>As of now, I have a session variable in my Flask app title 'playlist_id' that holds the Spotify playlist ID I want and a JavaScript function that should update the src attribute in the iframe element for embedded Spotify playlists. </p>
  
  <pre class="lang-py prettyprint-override"><code>@app.route("/playlist/build", methods=['GET', 'POST'])
  def build():
  
      if request.method == 'GET':
          print(request.method)
          return render_template("loading.html")
  
      elif request.method == 'POST':
          print(request.method)
          # Twython
          OAUTH_TOKEN = session.get('auth_oauth_token')
          OAUTH_TOKEN_SECRET = session.get('auth_token_secret')
          OAUTH_VERIFIER = session.get('oauth_verifier')
  
          auth_client = Twython(consumer_key, consumer_secret, OAUTH_TOKEN, OAUTH_TOKEN_SECRET)
          auth_creds = auth_client.get_authorized_tokens(OAUTH_VERIFIER)
  
          twitter = Twython(consumer_key, consumer_secret, auth_creds['oauth_token'], auth_creds['oauth_token_secret']) # Authenticated Twython instance (used to access user Twitter account information)
  
          # Spotipy
          access_token = session.get("spotify_access_token")
          sp = spotipy.Spotify(auth=access_token) # Authenticated Spotipy instance (used to access user Spotify account information)
  
          # Collecting and filtering posted statuses from user's Twitter account for Spotify links
          t_screename = twitter.get_account_settings()['screen_name']
          statuses = get_user_statuses(t_screename, twitter)
          spotify_urls = filter_statuses(statuses)
  
          # Using found Spotify tracks to build a tracklist
          s_screename = sp.current_user()['display_name']
          tracks = build_track_uri_list(convert_url_to_track(sp, spotify_urls))
  
          # Creating playlist and adding found tracks (Note: Only adds most recent 100 songs ~ issues with limits on the Spotify API)
          playlist_id = create_spotify_playlist(sp, s_screename)
          add_tracks(sp, s_screename, playlist_id, tracks)
  
          session['playlist_id'] = playlist_id
  
          return 'done'
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;iframe id="playlist-embed" src="getPlaylistLink()" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"&gt;&lt;/iframe&gt;
  
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>    &lt;script&gt;
       function getPlaylistLink() {
           var playlist_id = {{ session['playlist_id'] }};
           var pid_string = playlist_id.toString();
  
           var embedUrlPrefix = "https://open.spotify.com/embed/playlist/";
  
           var src = embedUrlPrefix.concat(pid_string);
           // var src = 'https://open.spotify.com/embed/playlist/' + String(playlist_id);
           console.log(src);
           return src
        }
        document.onload = function() {
        document.getElementById('playlist-embed').src=getPlaylistLink();
        };
      &lt;/script&gt;
  </code></pre>
  
  <p>I keep getting a 404 error for the URL returned from this function even though it seems to be correct when I post it in my browser. The console also seems to be catching the string as well so I'm just really confused on why the function is not working correctly. </p>
  
  <p>An example of the console on a run of this app: </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
       function getPlaylistLink() {
           var playlist_id = 3n6Sa0lMIl4Dr293oUYspr;
           var pid_string = playlist_id.toString();
  
           var embedUrlPrefix = "https://open.spotify.com/embed/playlist/";
  
           var src = embedUrlPrefix.concat(pid_string);
           // var src = 'https://open.spotify.com/embed/playlist/' + String(playlist_id);
           console.log(src);
           return src
        }
        document.onload = function() {
        document.getElementById('playlist-embed').src=getPlaylistLink();
        };
  &lt;/script&gt;
  </code></pre>