如何将当前图表（例如来自 'Spotify Charts API'）放入 table？

Question

我想在我的网站上列出当前图表，我想使用 Spotify Charts API 或类似 last.fm 的东西。问题是，我不知道如何将 JSON 响应处理成 HTML 标签。如果没有必要，我不想使用 PHP。

编辑：

我想从 http://charts.spotify.com/api/tracks/most_streamed/global/daily/latest 获取当前播放最多的曲目并将其放入 table。来自@Zack 的 Knockout.js 的解决方案对我来说很好用，但我想从上面的 link 中获取实时图表。

Answer 1

我有一个使用 Knockout.js 的简单示例，您可以将 html 元素绑定到 json 格式的数据。

http://jsfiddle.net/6cnex3pg/1/

function TracksViewModel() {
  this.callData = {
    "tracks": [{
      "track_url": "https:\/\/play.spotify.com\/track\/78TTtXnFQPzwqlbtbwqN0y",
      "track_name": "FourFiveSeconds",
      "artist_name": "Rihanna"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/4rmPQGwcLQjCoFq5NrTA0D",
      "track_name": "Uptown Funk",
      "artist_name": "Mark Ronson"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/6DrBnEWZ5kxvBiBaDaGQnc",
      "track_name": "Sugar",
      "artist_name": "Maroon 5"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/34gCuhDGsG4bRPIf9bb02f",
      "track_name": "Thinking Out Loud",
      "artist_name": "Ed Sheeran"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/7y2YUIyCuVhBidENVT0068",
      "track_name": "Love Me Like You Do - From \u0022Fifty Shades Of Grey\u0022",
      "artist_name": "Ellie Goulding"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/7dS5EaCoMnN7DzlpT6aRn2",
      "track_name": "Take Me To Church",
      "artist_name": "Hozier"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/4WGyY671Z37inSpCTBJoIm",
      "track_name": "Earned It (Fifty Shades Of Grey) - From The \u0022Fifty Shades Of Grey\u0022 Soundtrack",
      "artist_name": "The Weeknd"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/6SEizXg6WimNyK8NdI9biV",
      "track_name": "Time of Our Lives",
      "artist_name": "Pitbull"
    }, {
      "track_url": "https:\/\/play.spotify.com\/track\/6kwAbEjseqBob48jCus7Sz",
      "track_name": "Elastic Heart",
      "artist_name": "Sia"
    }],
    "prevDate": "2015-03-04"
  }
};

ko.applyBindings(new TracksViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: callData.tracks">
  <li>
    <a data-bind="attr: { href: track_url, title: track_name }"><span data-bind="text: track_name"></span></a>
  </li>
</ul>

如何将当前图表（例如来自 'Spotify Charts API'）放入 table？

How to put the current charts (eg. from 'Spotify Charts API') in a table?

html

javascript

charts

json

spotify