Load images with Ajax / Jquery with JSON API

Question

I need to get images of the JSON Spotify API to show it in HTML on my website but it doesn't work.

This is my Json data

albums:
href: "https://api.spotify.com/v1/browse/new-releases?offset=0&limit=20"
items: Array(20)
0:
album_type: "album"
artists: [{…}]
available_markets: (79) ["AD", "AE", "AR", "AT", "AU", "BE", "BG", "BH", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "DZ", "EC", "EE", "EG", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IL", "IN", "IS", "IT", "JO", "JP", "KW", "LB", "LI", "LT", "LU", "LV", "MA", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "OM", "PA", "PE", "PH", "PL", "PS", "PT", "PY", "QA", "RO", "SA", "SE", "SG", "SK", "SV", "TH", "TN", "TR", "TW", "US", "UY", "VN", "ZA"]
external_urls: {spotify: "https://open.spotify.com/album/6KT8x5oqZJl9CcnM66hddo"}
href: "https://api.spotify.com/v1/albums/6KT8x5oqZJl9CcnM66hddo"
id: "6KT8x5oqZJl9CcnM66hddo"
images: Array(3)
0: {height: 640, url: "https://i.scdn.co/image/6c1f62bfe24b3cf4a0f1c61448eada0ae0d16dff", width: 640}
1: {height: 300, url: "https://i.scdn.co/image/4474d5589348da0cf40c67cdd834f0f775310a9d", width: 300}
2: {height: 64, url: "https://i.scdn.co/image/199419a7e64995280531641f4ccea2301c753ae9", width: 64}
length: 3
__proto__: Array(0)
name: "Free Spirit"
release_date: "2019-04-05"
release_date_precision: "day"
total_tracks: 17
type: "album"
uri: "spotify:album:6KT8x5oqZJl9CcnM66hddo"
__proto__: Object
1: {album_type: "single", artists: Array(1), available_markets: Array(79), external_urls: {…}, href: "https://api.spotify.com/v1/albums/7viSsSKXrDa95CtUcuc1Iv", …}
2: {album_type: "single", artists: Array(1), available_markets: Array(79), external_urls: {…}, href: "https://api.spotify.com/v1/albums/5mLjE4CPn8kNpzqNNslabJ", …}

And this is my code


<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image"></div>
<script>



var accessToken = "XXX";
$.ajax({
    url: 'https://api.spotify.com/v1/browse/new-releases',
    type: 'GET',
    dataType: "json",
    headers: {
        'Authorization' : 'Bearer ' + accessToken
    },
    success: function(data) {
        console.log(data);
    }
});

function jsonSpotifyAPi(json) {

  $.each(albums.items, function(i, items) {
    $("<img />").attr("src", albums.items.images).appendTo("#image");
  });
};




</script>
</html>

I need to show the albums images on my website from this API.

The codepen if needed : https://codepen.io/geen21/pen/JVEBqr

I don't know in fact, I have to call this fuction albums maybe? — geen21
– geen21, Commented Apr 9, 2019 at 20:58

Marios Nikolaou · Accepted Answer · 2019-04-09 21:37:53Z

I have created bootstrap grid and the images will be displayed aligned.

Tested and it works.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

$(document).ready(function(){

var accessToken = "secret_token_here";
$.ajax({
    url: 'https://api.spotify.com/v1/browse/new-releases',
    type: 'GET',
    dataType: "json",
    headers: {
        'Authorization' : 'Bearer ' + accessToken
    },
    success: function(data) {
        console.log(data);
        $.each(data,function(i,item){
           //var len = item.items.length;
           //for(var i=0;i < len;i++){}
           $.each(item.items,function(i,tmp){
              console.log(tmp.images[0].url);

              $(".img1").append("<img src='"+tmp.images[0].url+"' />");
              $(".img2").append("<img src='"+tmp.images[1].url+"' />");
              $(".img3").append("<img src='"+tmp.images[2].url+"' />");
           });
        });
    }
});




});


</script>

</head>
<body>

<style>
.img1,.img2,img3{ width:auto;height:auto; }
</style>

<div class="container-fluid">

  <div class="row">

     <div class="col-md-6 img1">
     </div>

     <div class="col-md-6 img2">
     </div>

     <div class="col-md-6 img3">
     </div>

  </div>

</div>

Collectives™ on Stack Overflow

Load images with Ajax / Jquery with JSON API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related