Populating JPlayer playlist from external JSON: No results

Question

Im having a problem with my jplayer script. I need jplayer to play a playlist constructed from a json file. Here is a sample json output with one track:

{
data: {

  tracks:[
    {
    id: 8678,

    title: "Show Me",

    slug: "show-me",

    url:{youtube: "",buy: ""},

    audio:[{url: "track1.mp3",format_name: "MP3",mime_type: "audio/mpeg",}],

    image:{original: "https://d25jn4u0zlr7r6.cloudfront.net/album/8/8/iroking_tP08851bc807e123178fd1e33d98.jpg"},
     }
        ]
     }
}

Here is my script which should populate the playlist, but it doesn't work. For now it copies all data, but I want it to only get the title, image and audio url.

<script type="text/javascript">
$(document).ready(function(){
var cssSelector = {
    jPlayer: "#jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1"
};
var playlist = []; // Empty playlist
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
$.getJSON("https://api.server.com/2/radio/6/tracks?key=********************",

function(data){  // get the JSON array
    $.each(data,function(index,value){
        myPlaylist.add(value); // add each element in data in myPlaylist
    })
}); 
});
</script>

Any help would be greatly appreciated. Thanks

Answer 1

You need to change this code

$.getJSON("https://api.server.com/2/radio/6/tracks?key=********************",

function(data){  // get the JSON array
    $.each(data,function(index,value){
        myPlaylist.add(value); // add each element in data in myPlaylist
    })
}); 

to this code

$.getJSON("https://api.server.com/2/radio/6/tracks?key=********************",

function(data){  // get the JSON array
    $.each(data['data'].tracks, function(index,value){
        myPlaylist.add({
            title: value.title,
            artist: value.slug,
            mp3: value.audio[0].url,
            poster: value.image.original
        });
    })
});