如何在 for 循环中将 (hyper)link 添加到 HTML 变量？（烧瓶）

Question

我正在使用 Spotify 的 API 列出我在本地服务器上的所有播放列表。当您在输入框中输入一首 Spotify 歌曲 link 时，您会 select 一个播放列表，点击“提交歌曲”后该歌曲就会被添加。我已经能够使用带有每个播放列表名称（作为键）和相应关注者计数（作为值）的字典来显示每个播放列表及其相应的关注者计数。这是网页的图片（红色块后面是缩写名称的其余部分和关注者数量）。

对于下一步，我想将显示的文本超link到播放列表link，这样如果您单击播放列表的名称，它就会在新选项卡中打开。我首先创建了一个包含播放列表名称（键）和相应的 links（值）的字典，但我不确定如何将其合并到我的 HTML 文件中。我在 HTML 页面中使用 for 循环来生成每个单选按钮（如下所示）。这是 Flask main.py 的代码（其他导入的文件只是使用 API 的小函数）：

from flask import Flask, render_template, request, redirect
import parse, user_add_to_playlist, load_playlist, playlist_links

app = Flask(__name__)

@app.route('/', methods=["GET","POST"])
def index():
    output = ""
    playlist = "Enter a song, select a playlist, and click 'Submit Song' to add it"
    playlists_dict = playlist_links.playlist_links_dict.items()


    playlists_followers_dict = load_playlist.load_playlist()
    # plist_links = playlist_links.playlist_links_dict.items()

    if request.method == "POST":
        song_link = request.form['song-link']
        song_uri = parse.parse_uri(song_link)
        playlist = request.form['playlist']
        playlist_id = parse.parse_playlist(playlist)
        song_name = user_add_to_playlist.add_song(song_uri, playlist_id)
        output = f"Thank you for sharing { song_name }!"

    return render_template('index.html', playlists_followers_dict=playlists_followers_dict, output=output)


if __name__ == "__main__":
    app.run(port = 1234)

这里是 index.html 代码：

<!DOCTYPE html>
<html>
  <body>
    <div id="banner">
        <h1>Spotify API Test</h1>
        <br>
    </div>
    <form action="" method="post">
        Spotify Link:
        <br>
        <br>
        <input type="text" name="song-link" size = "100"></input>
        <br>
        <br>
      </form>
      {% for key, value in playlists_followers_dict.items() %}
      <input type="radio" name="playlist" value="{{ key }}"> {{ key }}, {{ value }} Followers<br>
      {% endfor %}
      <br>
      <br>
        <input type="submit" value="Submit Song"></input>
      </form>  
      <div id="output"></div>
      <p class="output-statement">{{output}}</p>
    </div>
</body>
</html>

我怎样才能在我的 HTML 中改变这个 for 循环，让每个播放列表 link 使用 plist_links 字典中的值进行编辑，以便它们在您打开时在新选项卡中打开单击名称？

{% for key, value in playlists_followers_dict.items() %}
<input type="radio" name="playlist" value="{{ key }}"> {{ key }}, {{ value }} Followers<br>
{% endfor %}

Answer 1

经过进一步试验，我是这样解决的：

我没有使用两个字典（一个有播放列表名称和关注者计数，另一个有播放列表名称和 link），而是创建了一个元组列表，我将其存储在一个名为 'playlists' 的变量中看起来像这样打印：

[('Chill...', '1', 'https://example.com), (房子..., 0, 'https://example.com), . .., ..., ...]

然后在我的 HTML 中，我将循环更改为以下内容：

{% for (name, follower_count, link) in playlists: %}
  <input type="radio" name="playlist" value="{{name}}"><a href={{link}} target="_blank">{{name}}, {{follower_count}} Followers</a><br>
{% endfor %}

如何在 for 循环中将 (hyper)link 添加到 HTML 变量？（烧瓶）

How do you add a (hyper)link to an HTML variable in a for loop? (Flask)

html

css

python

jinja2

flask

如何在 for 循环中将 (hyper)link 添加到 HTML 变量？ （烧瓶）

How do you add a (hyper)link to an HTML variable in a for loop? (Flask)

html

css

python

jinja2

flask

如何在 for 循环中将 (hyper)link 添加到 HTML 变量？（烧瓶）