CODEWITHSUNDEEP
javascriptjqueryspotify
Chicken Sandwich No Pickles
Chicken Sandwich No Pickles

Reputation: 3362

API Get Request

I am new to coding, so this might be a simple fix, but I am not sure what I did wrong. I am building a program that uses Spotify's API.

I'm not going to lie, this isn't a super useful program haha, but what you do is you put in an ID value for the artist and I want it to return a list of all of the albums. Here is an example of an id: 4P0dddbxPil35MNN9G2MEX

This is the error message that I get:

https://api.spotify.com/v1/artists/undefined/albums?callback=jQuery111104149643396958709_1449799723013&album_type=album&_=144979972301400 (Bad Request).

Does anyone know why my search result comes up as "undefined?"

Here is my JavaScript/jQuery:

var showArtistInformation = function(artistSelect){
    //clone the result template
    var artistResult = $('.searchResults .hiddenTemplates .artistAlbumInformation').clone();
    //Set the name of the artist in the result
    var theArtistName = result.find('.artistName');
    theArtistName.text(artists.name);
    //Get the name of the artist Album
    var theAlbumName = result.find('albumName');
    theAlbumName.text(album.name);
    //Get the genre of the album
    var theAlbumGenre = result.find('albumGenre');
    theAlbumGenre.text(genre.name);
    //Get the tracklisting for each Album
    var theTrackNames = result.find('trackList');
    theTrackNames.text(track.name);

    return artistResult;
}

    var getArtistAlbumInformation = function(artistID){
        //the parameters that we need to pass in our request to Spotify's API
        var request = {
            album_type: "album"
        };

        $.ajax({
            url: "https://api.spotify.com/v1/artists/" + artistID + "/albums",
            data: request,
            dataType: "jsonp",
            type: "GET",
        })
        //What the function should do if successful
        .done(function(result){
            $.each(result.items, function(i,item){
                var artistReturnedResult = showArtistInformation(item);
                $('.artistAlbumInformation').append(artistSelect);

            })

        })
        //What the function should do if it fails
        .fail(function(jqXHR, error){
            var errorElem = showError(error);
            $('.search-results').append(errorElem);
        });


    }

//Clicking the submit button activates the function that gets the results
$(document).ready(function() {

    /*Clicking the Search Button*/
        $('.searchButton').on('click',function(event){
            event.preventDefault();
            //Zero out results if previous results have run
                $('.albumArtistInformation').html('');
            //End User Input
            var userSearch = $(this).find("input[name='musicalArtist']").val();
            getArtistAlbumInformation(userSearch);


        });



})

Upvotes: 0

Views: 473

Answers (3)

Steve K
Steve K

Reputation: 9055

If you want to get the album id you need to use the url https://api.spotify.com/v1/albums/AlbumID and if you want to get the artists info then use the url https://api.spotify.com/v1/artist/ArtistID right now you are defining an undefined artist and then putting albums after, also I have tried using this id for both of these and the id is invalid so you need to find the correct id here is a working url to find an album click on this and you will see a valid response https://api.spotify.com/v1/albums/0sNOF9WDwhWunNAHPD3Baj?callback=jQuery111104149643396958709_1449799723013&&type=album

Upvotes: 0

Darko
Darko

Reputation: 38860

https://api.spotify.com/v1/artists/undefined/albums?callback=jQuery111104149643396958709_1449799723013&album_type=album&_=144979972301400

Emphasis mine. The artist ID you are giving your function is coming through as undefined. That means that wherever you are calling this function from is where your error is. Try console.log(artistID); in your code to see it yourself.

var userSearch = $(this).find("input[name='musicalArtist']").val(); is where your problem is.

You are selecting by using $(this) which in the context of the click function is the actual search button. So you are trying to find musicalArtist inside your button which makes no sense.

Try using this instead:

var userSearch = $("input[name='musicalArtist']").val();

Just make sure you don't have more than one input with that name as that selector could return multiple elements.

Upvotes: 1

Lucas Rodriguez
Lucas Rodriguez

Reputation: 1203

Change the jQuery find to:

var userSearch = $("input[name='musicalArtist']").val();

this was referring to the button where the click event fired.

Upvotes: 1

Related Questions