如何从Firebase Firestore将数据获取到HTML上的卡片视图

Question

我是Web开发的新手，最近，我正在制作一个音乐流媒体网站。我想从Firestore到卡视图获取数据。 让我用一个例子来解释我的问题， 我在消防局里有个名为音乐家的收藏。

这是我的数据结构的一个例子，

ax.set_xlim([daveysdf_2019['Date'].iloc[0], daveysdf_2019['Date'].iloc[-1]])

我想像下面这样对这些数据进行分页，

Musicians---
            Random_ID_01--
                          Artist_name:"Isuru"
                          Image_URL:"url"
            Random_ID_02--
                          Artist_name:"Jonny"
                          Image_URL:"url"
            Random_ID_03--
                          Artist_name:"Alex"
                          Image_URL:"url"

我正在使用Boostrap字母分页栏来获取点击值。 当用户单击按钮“ A”时，我要获取所有首字母以“ A”开头的艺术家。 我尝试使用诸如cloneNode（true）之类的许多方法，但它不符合我的要求，因为它是将所有数据添加到同一页，而保留了旧数据。 我要显示艺术家数据的方式是，当用户单击按钮“ A”时，页面上应显示Alex的卡片；当用户单击按钮“ J”时，页面上应显示Jonny的卡片，但不应该显示Alex的卡片。

如果能使用js或Jquery源代码向我解释

，我将不胜感激。