Can't get url from json using javascript

Question

I'm trying to get the url to my most recently played song's album image using last.fm's spotify scrobble api. I'm able to get the song name and artist, but the text for the link to the song's album image is returning "object%20Object" or "object Object".

var img = new Image();
    img.setAttribute("src", $.get("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=plggs&api_key=MY_API_KEY&limit=1&format=json", function (data, status) {
        $("#album-art").html(data["recenttracks"]["track"][0]["image"][2]['#text']);
    }));
    img.setAttribute("class", "album-img");
    img.setAttribute("alt", "album");
    document.getElementById("album-art-div").appendChild(img);

Here's the json that last.fm is returning:

{"recenttracks":{"track":[{"artist":{"#text":"Jason Mraz","mbid":"82eb8936-7bf6-4577-8320-a2639465206d"},"name":"I Won't Give Up","streamable":"0","mbid":"7a49cb65-1f22-4334-b139-6500c2e79ee5","album":{"#text":"I Won't Give Up","mbid":"6e680b82-fa31-4342-87b6-1c306d4fb90c"},"url":"https://www.last.fm/music/Jason+Mraz/_/I+Won%27t+Give+Up","image":[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/6288819e941d491584fa6fa66b8e903f.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/6288819e941d491584fa6fa66b8e903f.png","size":"medium"},{"#text":"https://lastfm-img2.akamaized.net/i/u/174s/6288819e941d491584fa6fa66b8e903f.png","size":"large"},{"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/6288819e941d491584fa6fa66b8e903f.png","size":"extralarge"}],"date":{"uts":"1517936832","#text":"06 Feb 2018, 17:07"}}],"@attr":{"user":"PlGGS","page":"1","perPage":"1","totalPages":"103","total":"103"}}}

Does anyone know how to specifically get the album's 'extralarge' image url?

`$.get()` returns a promise. You need to do that in the callback, like you already are. — SLaks, Feb 06 '18 at 19:03
You're trying to set the attributes value to a promise. Set the attributes value inside the promise callback. — , Feb 06 '18 at 19:04
@SLaks What does that mean? Sorry, I'm in way over my head jumping into javascript like this. — PlGGS, Feb 06 '18 at 19:06
@Amy Which aspect of the function is the callback? Is it where I currently have '#album-art'? — PlGGS, Feb 06 '18 at 19:09
Yes, that's correct. `$.get` doesn't return a `string`. It immediately returns an object called a `promise` that represents a pending operation. You're setting the `album-art` HTML correctly. Your attribute should be set there as well. That part of your code is where the promise is "fulfilled", e.g. it got a response back. — , Feb 06 '18 at 19:10
@Amy Oh, okay. Thanks. Should I set the img source to "album-art" in order to get the returned value of the function? — PlGGS, Feb 06 '18 at 19:13

score 0 · Accepted Answer · answered Feb 06 '18 at 20:24

Only set the src once the get returns:

In this example I am not calling the API since I don't have an API key.

My setTimeout function emulates the async API call.

I also don't create the image or set its src until the API returns.

// I don't have an API KEY so this is commented out
/*
$.get("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=plggs&api_key=MY_API_KEY&limit=1&format=json", 
  function (data, status) {
    var img = new Image();
    img.setAttribute("class", "album-img");
    img.setAttribute("alt", "album");
    document.getElementById("album-art-div").appendChild(img);
    img.setAttribute("src", data.recenttracks.track[0].image[2]['#text']);
  }
);
*/

// This code emulates the API call.
setTimeout(
  function() {
    var data = {"recenttracks":{"track":[{"artist":{"#text":"Jason Mraz","mbid":"82eb8936-7bf6-4577-8320-a2639465206d"},"name":"I Won't Give Up","streamable":"0","mbid":"7a49cb65-1f22-4334-b139-6500c2e79ee5","album":{"#text":"I Won't Give Up","mbid":"6e680b82-fa31-4342-87b6-1c306d4fb90c"},"url":"https://www.last.fm/music/Jason+Mraz/_/I+Won%27t+Give+Up","image":[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/6288819e941d491584fa6fa66b8e903f.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/6288819e941d491584fa6fa66b8e903f.png","size":"medium"},{"#text":"https://lastfm-img2.akamaized.net/i/u/174s/6288819e941d491584fa6fa66b8e903f.png","size":"large"},{"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/6288819e941d491584fa6fa66b8e903f.png","size":"extralarge"}],"date":{"uts":"1517936832","#text":"06 Feb 2018, 17:07"}}],"@attr":{"user":"PlGGS","page":"1","perPage":"1","totalPages":"103","total":"103"}}};
    var img = new Image();
    img.setAttribute("class", "album-img");
    img.setAttribute("alt", "album");
    document.getElementById("album-art-div").appendChild(img);
    img.setAttribute("src", data.recenttracks.track[0].image[2]['#text']);

  },500
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="album-art-div"></div>

Can't get url from json using javascript

1 Answers1