在 Jinja2/Flask 中只显示我需要的卡片

问题描述

我在显示 html 卡片时遇到问题，但仅限于我想“过滤”的歌曲。我在数据库中有歌曲，我只想在我的 javascript 数组中获取歌曲的艺术家。

{% for song in songs %}

                    <script>
                        var song_filename = "../static/uploads/{{ song.filename }}";
                        var song_name = "{{song.name}}";
                        var song_artist = "{{song.artist_name}}";
                        var song_genre = "{{song.genre}}";

                        if(fY.includes(song_artist))
                        {
                            js_songs.push(song_filename);
                            js_songs_name.push(song_name);
                            js_songs_artists.push(song_artist);
                            js_songs_genre.push(song_genre);
                            console.log("[DEBUG] Added - " + song_name + " - " + song_artist);
                        }
                    </script>   

                            <div class="card" id="song-card">
                                <div class="card-body flex-row flex-grow-1 flex-shrink-1 my-auto">
                                    <div class="row">
                                        <div class="col mx-auto">
                                            <h4>{{ song.name }}</h4>
                                            <div class="dropleft"><button class="btn btn-primary dropdown-toggle float-right" aria-expanded="false" data-toggle="dropdown" type="button" style="background: #4ecca3;border-style: none;">Add to playlist</button>
                                                <div class="dropdown-menu dropdown-menu-right float-left"><a class="dropdown-item" href="#">Playlist 1</a><a class="dropdown-item" href="#">Playlist 2</a><a class="dropdown-item" href="#">Playlist 3</a></div>
                                            </div>
                                        </div>
                                    </div>
                                    <h6 class="text-muted card-subtitle mb-2">{{ song.artist_name }}</h6>
                                    <p class="card-text">
                                        <label for="genre">{{ song.genre }}</label>
                                    </p>

                                    <button class="btn btn-primary play-pause" onclick="loadTrack({{loop.index}} - 1) ; playTrack()" type="button" style="background: #191414;border-style: none;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" class="bi bi-play">
                                            <path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"></path>
                                        </svg>
                                    </button>
                                    
                                    <audio src="../static/uploads/{{song.filename}}" id="song"></audio>
                                </div>
                            </div>
                    {% endfor %}

所以我有这个代码。歌曲是来自数据库的歌曲。 fY 是 js 数组。我只想在 fY.includes(song_artist) 时显示卡片 div。

解决方法

您当前的代码没有依赖于 javascript 过滤的卡片显示，即您的卡片显示完全在 javascript 逻辑之外。

解决问题的一些方法是

保持代码不变，但删除嵌入的 Javascript。如果您使用 Bootstrap，请为每张卡片添加一个 collapse 类（这会使卡片隐藏），否则只需使用 display:none。使用在 page load 末尾运行的 Javascript 代码循环遍历所有卡片，检查歌曲的艺术家是否包含在 fy 中。如果是，则从卡片中删除 collapse 或 display:none，然后使卡片可见。
使用 Ajax 调用将您的歌曲作为 JSON 返回，使用您的 fy 数组过滤它们，然后使用 Javascript 循环并显示卡片
看看能不能把fy数组传给后端，然后在后端过滤歌曲，只将过滤后的结果返回给UI。这样你仍然可以使用 Jinja 来显示结果，但你只显示已经过滤的结果

flask jinja2 python