在嵌套JSON中訪問對象 - Songkick API

我試圖在Songkick的事件詳細信息的API的Performance部分下獲取Artist的URI和DisplayName。從他們的網站在嵌套JSON中訪問對象 - Songkick API

實例數據結構：

{ 
    "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。在我的HTML和Javscript下面。我可以成功訪問場地的名稱;但是，當試圖在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>

Javscript文件：

$(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>'); 
     }); 
    }  
    }); 
    });

來源

2013-04-21 Ryan Hinchey

您的JS控制檯說什麼？ – Blender 2013-04-21 21:13:56

你實際上從API獲得什麼數據？ – 2013-04-21 21:14:18

它是否打破了一切，所以你根本沒有得到任何數據，或者你根本沒有得到任何特定領域的數據？ – 2013-04-21 21:21:18

望着從API的響應，並不是所有的事件具有performance數組中artist屬性，則需要簡單地檢查性能陣列的長度使用以下內容：

$("#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-21 22:22:58 f0x

謝謝f0x。這就像一個魅力 – 2013-04-21 23:08:56

@RyanHinchey很高興幫助:) – f0x 2013-04-21 23:16:39

在嵌套JSON中訪問對象 - Songkick API

回答

相關問題