根据属性显示排序的 Json 数据

Question

我有以下数据：

[
  {Genre: "Classical", Artist: "Vince", Site: "www.vinny.uk"}, 
  {Genre: "EDM", Artist: "Bart", Site: "www.barry.uk"}, 
  {Genre: "Rock", Artist: "Judas", Site: "www.judy.uk"}, 
  {Genre: "Rock", Artist: "Bran", Site: "www.branny.uk"}, 
  {Genre: "EDM", Artist: "Tom", Site: "www.tommy.uk"}
]

我想在布局中显示数据，如下所示：

<div>
  <h1>Rock</h1>
  <a href="www.judy.uk"><h3>Judas</h3></a>
  <a href="www.branny.uk"><h3>Bran</h3></a>
</div>
<div>
  <h1>EDM</h1>
  <a href="www.barry.uk"><h3>Bart</h3></a>
  <a href="www.tommy.uk"><h3>Tom</h3></a>
</div>
<div>
  <h1>Classical</h1>
  <a href="www.vinny.uk"><h3>Vince</h3></a>
</div>

一个重要的注意事项是我无法编辑数据。 我正在使用 JQuery 顺便说一句。

是否可以循环数据，这样我就不必为每种类型输入 data[0].genre、data[1].genre 等？

我该怎么做？可能吗？ 也许这是一个简单或不清楚的问题，但我对此很陌生。

Answer 1

您可以通过使用 for 循环轻松实现此目的。 在W3schools 他们解释得很好。 ForEach 也可能对此非常有帮助