CODEWITHSUNDEEP
javascriptjqueryhtmljsonajax
Ryan Hinchey
Ryan Hinchey

Reputation: 3

Accessing Objects in Nested JSON - Songkick API

I'm trying to get the Artist's URI and DisplayName under the Performance section of Songkick's event detail's API.

Example data structure from their site:

{
    "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"
    }
}

I'm using AJAX and jQuery. I can successfully access the name of the venue; however, when trying to get data within the Performance array, it breaks and nothing returns.

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

Upvotes: 0

Views: 575

Answers (1)

cillierscharl
cillierscharl

Reputation: 7117

Looking at the response from the API, not all events have an artist property in the performance array, you will need to simply check the length of the performance array using the following:

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

If you're looking at building html this way, this is another example (although you should really consider a templating solution like knockout, or handlebars if you're doing this often):

$.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. Remove your api key from your earlier comment and reset it if possible ;)

Upvotes: 1

Related Questions