Просмотр изображений от JSON

Попытка отображения обложки с результатами. Что-то в теге img src вызывает загрузку приложения. Если я просто укажу img на data.tracks [i] .album.name (очевидно, не настоящий URL-адрес, но достаточно, чтобы проверить, работает ли он), он вставляет его просто отлично, но в тот момент, когда я меняю его, чтобы вставить URL-адрес в место, это заставляет приложение перестать работать.Просмотр изображений от JSON

$('#findTracks').click(function (e) { 
       e.preventDefault(); // override/don't submit form 
       $('#recommendations').empty(); 
       var artist = $('#artist').val(); 
       var userid = ""; 
       var playlistid = ""; 

       $.ajax({ 
        url: 'http://ws.spotify.com/search/1/track.json?q=' + artist, 
        type: 'GET', 
        dataType: 'json', 
        success: function(data) { 
         if (data.tracks.length > 0) { 
          var tracksLength = data.tracks.length, html = ''; 
          for (var i=0; i<tracksLength; i++) { 
           var href = ''; 
           if (data.tracks[i].album.availability.territories.indexOf(' GB ') !== -1) { // data.tracks[i].href 
            href = data.tracks[i].href; 
            href = 'makeReq(\''+data.tracks[i].name + ' by '+data.tracks[i].artists[0].name+'\')'; 
            html += '<li><a href="#" onclick="' + href + '">' +data.tracks[i].name + ' by '+data.tracks[i].artists[0].name+ ' <img src="' +data.tracks[i].album.images[0].url+ '" /></a>';html += '</li>'; 

            html += '</li>'; 
           } 
          } 
          $('#third').css('display', 'block'); 
          $('#recommendations').append(html); 
         } else { 
          $('#recommendations').append('<li>No matches returned.</li>'); 
          $('#third').css('display', 'none'); 
         } 
        }, 
        error: function(err) { 
         alert("The Spotify API failed to return a response."); 
        } 
       });     
      });

Это мой первый раз когда-либо кодировался в javascript, поэтому, пожалуйста, пройдите ко мне! лол

EDIT:

Это, кажется, работает хорошо! Тем не менее, многие из песен ничего не делают, когда я нажимаю на них.

Например, введите «Не останавливайся» и только «Черный глазный горох - не прекращай вечеринку» работает в первой десятке .. Кто-нибудь знает почему?

также, любой известный почему "if (data.tracks [i] .album.availability.territories.indexOf ('GB')! == -1)" есть? Если я выберу это, все перестанет работать ... Я не в G.B.

источник

2015-02-10 Timothy Richard Elliott

вы смотрите на HTML? что говорит img src? – pennstatephil

Если посмотреть в консоли вы получаете ошибку

Uncaught TypeError: Cannot read property '0' of undefined

смотрит на данные возвращает запрос мы замечаем, что data.tracks [я] .album возвращает

{ 
    "released": "2006", 
    "href": "spotify:album:2knAf4wg8Gff8q1bXiXCTz", 
    "name": "The Dutchess", 
    "availability": { 
     "territories": "MX" 
    } 
}

есть никакого свойства images так, когда вы звоните

data.tracks[i].album.images[0]

вы получите неопределенную ошибку, в результате чего сценарий, чтобы остановить выполнение.
Я не знаком с spootify api, но быстро взглянул на api theres конечной точки для get-album. Вот что я смог придумать, чтобы получить обложку альбома

$.get("http://ws.spotify.com/search/1/track.json?q=Fergie",function(data){ 
 
    var albumId = data.tracks[97].album.href.split(":")[2]; 
 
    $.get("https://api.spotify.com/v1/albums/" + albumId,function(albumResponse){ 
 
     var firstImage = albumResponse.images[0]; 
 
     $('body').append($('<img/>',{ 
 
      src : firstImage.url, 
 
      width : firstImage.width, 
 
      height : firstImage.height 
 
     })); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body></body>

Вы должны исследовать больше в том, как получить обложку альбома, так как я уверен, если это является оптимальным решением.

search Конечная точка, о которой вы указали, отличается от того, который вы используете.

One your using 
    url: 'http://ws.spotify.com/search/1/track.json?q=' + artist, 
    One you linked to 
    url: 'https://api.spotify.com/v1/search?q=' + artist + '&type=track,artist&market=GB',

Heres ваше решение с изменением конечной точки

$('#findTracks').click(function(e) { 
 
    e.preventDefault(); // override/don't submit form 
 
    $('#recommendations').empty(); 
 
    var artist = $('#artist').val(); 
 
    var userid = ""; 
 
    var playlistid = ""; 
 

 
    $.ajax({ 
 
    //url: 'http://ws.spotify.com/search/1/track.json?q=' + artist, 
 
    url: 'https://api.spotify.com/v1/search?q=' + artist + '&type=track,artist&market=GB', 
 
    type: 'GET', 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     if (data.tracks.items.length > 0) { 
 
     data.tracks = data.tracks.items 
 
     data.artists = data.artists.items 
 
     var tracksLength = data.tracks.length, 
 
      html = ''; 
 
     for (var i = 0; i < tracksLength; i++) { 
 
      var href = ''; 
 
      href = data.tracks[i].href; 
 
      href = 'makeReq(\'' + data.tracks[i].name + ' by ' + data.tracks[i].artists[0].name + '\')'; 
 
      html += '<li><a href="#" onclick="' + href + '">' + data.tracks[i].name + ' by ' + data.tracks[i].artists[0].name + ' <img src="' + data.tracks[i].album.images[0].url + '" /></a>'; 
 
      html += '</li>'; 
 
      html += '</li>'; 
 

 
     } 
 
     $('#third').css('display', 'block'); 
 
     $('#recommendations').append(html); 
 
     } else { 
 
     $('#recommendations').append('<li>No matches returned.</li>'); 
 
     $('#third').css('display', 'none'); 
 
     } 
 
    }, 
 
    error: function(err) { 
 
     alert("The Spotify API failed to return a response."); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Artist: 
 
<input type="text" id="artist" /> 
 
<button id="findTracks">Find Tracks</button> 
 
<div id="recommendations"></div>

источник

2015-02-10 18:34:38

Это странно, должно быть получение изображений https://developer.spotify.com/web-api/console/get-search-item/#complete –

@TimothyRichardElliot Я добавил редактирование об api, которую вы связали до –

. Моя следующая проблема заключается в том, как заставить ее отправить на мой адрес электронной почты ... Первоначально я был создан скрипт для отправки песни, запрошенной непосредственно в плейлист «Запросы» на моей учетной записи spotify, но потом я понял, что для этого требуется oauth. Теперь я пытаюсь передать его через php на мой адрес электронной почты –

Просмотр изображений от JSON

ответ

Смежные вопросы