Делая API-проект capstone, не могу получить значение из текстового ввода

Question

Первый пост здесь.

(простите CSS здесь, это в стадии разработки)

Вот мой ответ: https://repl.it/@Johnmexico/BlandElegantOrigin-1

Я постараюсь обобщить как можно лучше. Я объявил значение ввода текста в строке 7 файла JS и попытался вставить его в свой AJAX, а также в функцию fetchAPIList в строке 22.

JS:

const artistName = $('.query').val();

function getDataFromApiSongs(endpoint, callback) {
  $.ajax({
      data: Object.assign(
          { 
            apikey: APIKey, 
            format: 'json' 
          }, 
          `q_artist=${artistName}`
      ), 
      contentType: 'application/json', 
      type: "GET", 
      url: MusicAPI + endpoint
  })
  .done(callback);
}

function fetchAPIList(){
    getDataFromApiSongs(`track.search?q_artist=${artistName}&page_size=10&page=1&s_track_rating=desc`, (response) =>{...

HTML:

        <fieldset>
            <form action=# role="form" onsubmit="fetchAPIList()">
                <label for="search-musixmatch" id="label">Find Songs by Artist</label>
                <input class="query" type="text" placeholder="Search for Artist">
                <input class="submit-button" type="submit">

            </form>

        </fieldset>

Теперь, если я жестко закодирую его и исполнителя, такого как "drake" вместо $ {artistName}, я получу именно то, что ищу, лучшие 10 песен Drake на данный момент. Если я введу исполнителя и отправлю его с моим исходным кодом (который просто возвращает 10 лучших песен во всей базе данных, без учета каких-либо параметров.

Итак, мой вопрос: как правильно поставить значение из входных данных и использовать его для получения информации из API? (например, «2pac» или любой другой художник) Потому что, очевидно, то, что я делаю сейчас, не является правильным способом сделать это.

PS, вы должны использовать разрешающее расширение CORS в браузере, но я уверен, что многие из вас, ребята, уже имеют такой плагин.

Спасибо, Рикардо.

Answer 1

Основная проблема в том, что

const artistName = $('.query').val();

запускается при первой загрузке вашей страницы. Поэтому вы присваиваете artistName значение того, что было в текстовом поле «запрос» в тот момент. Переменная не обновляется при вводе нового значения. Вам нужно спросить, каково значение поля в момент запуска вашей функции fetchAPIList (), а затем использовать это в своем URL.

Вторичная проблема заключается в том, что вы запускаете функцию fetchAPIList () при отправке формы ... но вы не препятствует поведению формы по умолчанию, которое заключается в традиционной полностраничной обратной передаче на сервер.

Собрав воедино эти две вещи и объединив их с тем фактом, что вы используете jQuery, и с тем, что, как правило, рекомендуется использовать ненавязчивые обработчики событий (то есть обработчики событий, объявленные в основном сценарии, а не встроенные в HTML), мы можем переставить код следующим образом:

HTML (изменение здесь в том, что форма больше не имеет «onsubmit», но у нее есть «id» для ее идентификации):

<fieldset>
        <form action=# role="form" id="searchForm">
            <label for="search-musixmatch" id="label">Find Songs by Artist</label>
            <input class="query" type="text" placeholder="Search for Artist">
            <input class="submit-button" type="submit">

        </form>
</fieldset>

JS (функция getAPIList изменена на ненавязчивый обработчик событий, удалены неиспользуемые функции watchSubmit и displaySongData, переопределена функция getDataFromApiSongs для принятия последнего значения artistName):

const MusicAPI = "https://api.musixmatch.com/ws/1.1/";
const APIKey= "a2870731fab086760a6e7e1a767ceb86";

function getDataFromApiSongs(endpoint, artistName, callback) {
  $.ajax({
      data: Object.assign({ 
          apikey: APIKey, 
          format: 'json' }, `q_artist=${artistName}`), 
      contentType: 'application/json', 
      type: "GET", 
      url: MusicAPI + endpoint}).done(callback);
}

//unobtrusive "submit" event handler written using jQuery syntax
$("#searchForm").submit(function(event) {
  event.preventDefault(); //prevent default postback behaviour
  var artistName = $(".query").val();
      getDataFromApiSongs(`track.search?q_artist=${artistName}&page_size=10&page=1&s_track_rating=desc`, artistName, (response) =>{
      const message = JSON.parse(response);
      console.log(message.body)
        const { message:{ body: {track_list = []}}} = message;
        console.log(track_list);
        let songDOM = ''
        track_list.map((item) => {
            const {track:{ track_name,artist_name, album_name }} = item;
            songDOM += `<li><b>Title</b>: "${track_name}" by ${artist_name}, <i>${album_name}</i>`;
        });
        let songsList = document.getElementById('songsList')
        songsList.innerHTML = songDOM;
        $(".query").val("");
    });
});

Обновлен репл: https://repl.it/repls/GoodnaturedNoisyApplication