Невозможно отобразить результат функции - PullRequest
Новая
       17

Невозможно отобразить результат функции

0 голосов
/ 10 июня 2018

Я пытаюсь создать сайт, на котором через веб-API Spotify я отображаю информацию определенного элемента (Artist, Track, Album и т. Д.).В функции, в которой я ищу песню, я вызываю другую функцию, которая должна запросить более конкретную информацию о песне (время, ключ ....) и вернуть результат, который будет напечатан вместе с результатом первой функции.,Проблема в том, что когда я иду печатать результат второй функции, он дает мне ответ «неопределенный».Запрос на вторую функцию, на мой взгляд, успешен, потому что консоль не дает мне ошибок.Может кто-нибудь помочь мне понять, где ошибка? 

    function ricercaTrack() {         // the first function
  var token = document.getElementById("token").innerHTML;
  var xhr = new XMLHttpRequest();
  var artist = document.getElementById("artista").value;
  artist = artist.replace(" ", "%20");
  console.log(artist);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      var result = '';
      for (var i = 0; i < response.tracks.items.length; i++) {
        console.log(response.tracks.items[i]);
        var specifiche = ricercaSpecifiche(response.tracks.items[i].id);    //the call of the second function

        result += '<div class="border"><div class="card-body">' +
          '<img style="float:right;" src=' + response.tracks.items[i].album.images[2].url + '>' +
          'Nome : ' + response.tracks.items[i].name + '<br/>' +
          'Artista : ' + response.tracks.items[i].artists[0].name + '<br/>' +
          'N° Traccia : ' + response.tracks.items[i].track_number + '<br/>' +
          'Tipologia : ' + response.tracks.items[i].type + '<br/>' +
          specifiche + '<br/>' +
          '<iframe src="https://open.spotify.com/embed?uri=' + response.tracks.items[i].uri + '" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>' + '</div></div>';
      }
      alert
      document.getElementById("artists").innerHTML = result;
    }
  };
  xhr.open('GET', "https://api.spotify.com/v1/search?q=" + artist + "&type=track&market=IT&limit=10&offset=5", true);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', 'Bearer ' + token);
  xhr.send();
}

function ricercaSpecifiche(i) {       //the second function
  var token = document.getElementById("token").innerHTML;
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      var specifiche = '';
      specifiche +=
        'BPM : ' + response.tempo + '<br/>' +
        'Scala : ' + response.key + '<br/>';
    }    
    return specifiche;
  };
  xhr.open('GET', "https://api.spotify.com/v1/audio-features/"+ i, true);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', 'Bearer ' + token);
  xhr.send();

}

1 Ответ

0 голосов
/ 10 июня 2018

Попробуйте изменить последний параметр на false в этом операторе внутри метода ricercaSpecifiche

xhr.open('GET', "https://api.spotify.com/v1/audio-features/"+ i, false);

Это приведет к тому, что этот вызов будет синхронным, и переменная specifiche будет иметь результат

Обновленный метод: 

function ricercaSpecifiche(i) { //the second function
    var token = document.getElementById("token").innerHTML;
    var xhr = new XMLHttpRequest();
    var specifiche = '';

    xhr.open('GET', "https://api.spotify.com/v1/audio-features/" + i, false);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.send();

    if (xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);

        specifiche +=
        'BPM : ' + response.tempo + '<br/>' +
        'Scala : ' + response.key + '<br/>';
        return specifiche;

    }
}
...