0

我正在尝试在 Songkick 的事件详细信息 API 的性能部分下获取艺术家的 URI 和 DisplayName。

他们网站的示例数据结构：

{
    "resultsPage": {
        "results": {
            "event": [
                {
                    "id": 11129128,
                    "type": "Concert",
                    "uri": "http://www.songkick.com/concerts/11129128-wild-flag-at-fillmore?utm_source=PARTNER_ID&utm_medium=partner",
                    "displayName": "Wild Flag at The Fillmore (April 18, 2012)",
                    "start": {
                        "time": "20:00:00",
                        "date": "2012-04-18",
                        "datetime": "2012-04-18T20:00:00-0800"
                    },
                    "performance": [
                        {
                            "artist": {
                                "uri": "http://www.songkick.com/artists/29835-wild-flag?utm_source=PARTNER_ID&utm_medium=partner",
                                "displayName": "Wild Flag",
                                "id": 29835,
                                "identifier": []
                            },
                            "displayName": "Wild Flag",
                            "billingIndex": 1,
                            "id": 21579303,
                            "billing": "headline"
                        }
                    ],
                    "location": {
                        "city": "San Francisco, CA, US",
                        "lng": -122.4333,
                        "lat": 37.78424
                    },
                    "venue": {
                        "id": 6239,
                        "displayName": "The Fillmore",
                        "uri": "http://www.songkick.com/venues/6239-fillmore?utm_source=PARTNER_ID&utm_medium=partner",
                        "lng": -122.4333,
                        "lat": 37.78424,
                        "metroArea": {
                            "uri": "http://www.songkick.com/metro_areas/26330-us-sf-bay-area?utm_source=PARTNER_ID&utm_medium=partner",
                            "displayName": "SF Bay Area",
                            "country": {
                                "displayName": "US"
                            },
                            "id": 26330,
                            "state": {
                                "displayName": "CA"
                            }
                        }
                    },
                    "status": "ok",
                    "popularity": 0.012763
                }
            ]
        },
        "totalEntries": 24,
        "perPage": 50,
        "page": 1,
        "status": "ok"
    }
}

我正在使用 AJAX 和 jQuery。我可以成功访问场地名称；但是，当尝试在 Performance 数组中获取数据时，它会中断并且没有任何返回。

HTML：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="js/vendor/jquery-1.9.1.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">Mesh.fm</a>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container">

            <!-- Main hero unit for a primary marketing message or call to action -->
            <div class="hero-unit">
                <h1>Mesh.fm</h1>
                <p>The best way to find new music happening near you!</p>
                <button class="btn btn-warning btn-large" id="shows">Listen to NYC </button>
            </div>

            <!-- Example row of columns -->
            <div class="row">
                <div class="span2">
                    <h2>Type</h2>
                    <ul id="artistname"></ul>
                </div>
                <div class="span10">
                    <h2>Show</h2>
                    <ul id="localshows"></ul>
                </div>
            </div>

            <hr>

        </div> <!-- /container -->




    </body>
</html>

jQuery：

$(document).ready(function() {
  $.ajax({
  url:  "http://api.songkick.com/api/3.0/metro_areas/7644/calendar.json?&apikey={your_api_key}&per_page=all&max_date=2013-06-30&jsoncallback=?",
  dataType:   "jsonp", 
  success:    function(data){ 
    $.each(data["resultsPage"]["results"]["event"], function(i, entry){
        $("#localshows").append('<li><a href="' + entry.uri+'">'+entry.venue.displayName+'</a></li>');
        $("#artistname").append('<li><a href="' + entry.uri+'">'+entry["performance"][0]["artist"]["displayName"]+'</a></li>');
      });
     }     
    });
  });
4

1 回答 1

1

查看来自 API 的响应，并非所有事件artist在数组中都有属性performance，您只需使用以下命令检查性能数组的长度：

$("#localshows").append('<li><a href="' + entry.uri + '">' + entry.venue.displayName + '</a></li>');
if (entry.performance.length) {
    $("#artistname").append('<li><a href="' + entry.uri + '">' + entry["performance"][0]["artist"]["displayName"] + '</a></li>');
}

如果您正在考虑以这种方式构建 html，这是另一个示例（尽管如果您经常这样做，您应该真正考虑像敲除或把手这样的模板解决方案）：

$.each(data.resultsPage.results.event, function (i, event) {
    var showsContainer = $('#localshows');
    var artistContainer = $('#artistname');

    var showListItem = $('<li/>');
    var showAnchor = $('<a/>').attr('href', event.uri).html(event.venue.displayName);
    showListItem.append(showAnchor);
    showsContainer.append(showListItem);

    if (event.performance.length) {
        var artistListItem = $('<li/>');
        var artistAnchor = $('<a/>').attr('href', event.uri).html(event.performance[0].artist.displayName);
        artistListItem.append(artistAnchor);
        artistContainer.append(artistListItem);
    }
});

PS。从您之前的评论中删除您的 api 密钥，并在可能的情况下将其重置；）

于 2013-04-21T22:22:58.257 回答