I have serialized my django model data, I now want to add the data to a variable in jquery , how can i do this ? the variable in jquery named 'trackUrl' needs to read a list of the audio source urls, if you see in my API tracks page I have the data for each user, but I'm not sure how to approach this, any ideas ?
serializers.py
class TrackSerializer(serializers.ModelSerializer):
class Meta:
model = Music
fields = ['track']
views.py
class TrackViewSet(viewsets.ModelViewSet):
queryset = Music.objects.all()
serializer_class = TrackSerializer
def get_queryset(self):
user = self.request.user
songs = Music.objects.all().filter(artist=user)
return songs
Django Rest API: tracks
Track List
GET /music/tracks/
HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept
[
{
"track": "http://127.0.0.1:8000/media/path/to/audio/1-05_Isnt_She_Lovely.mp3"
},
{
"track": "http://127.0.0.1:8000/media/path/to/audio/01_-_We_Will_Rock_You_1.mp3"
},
{
"track": "http://127.0.0.1:8000/media/path/to/audio/08_Dont_Give_Hate_A_Chance.MP3"
},
{
"track": "http://127.0.0.1:8000/media/path/to/audio/01_Closer.mp3"
},
{
"track": "http://127.0.0.1:8000/media/path/to/audio/01_Empty_Garden.mp3"
}
]
jquery
<script>
$(function()
{
var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl,
albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'),
sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'),
sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"), i = playPauseButton.find('i'),
tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes,
ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null,
tFlag = false, albums = ['Dawn','Me & You','Electro Boy','Home','Proxy (Original Mix)'],
trackNames = ['Empty Garden','Closer','Dont Give Hate a Chance','We will rock you','Isnt she lovely'],
albumArtworks = ['_1','_2','_3','_4','_5'];
var trackUrl = [],
playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;