JS: Созданная переменная не распознает входное значение - PullRequest
Новая
       21

JS: Созданная переменная не распознает входное значение

0 голосов
/ 09 марта 2019

Я создаю новую переменную из класса.У класса есть один конструктор, city, а затем он выбирает джаз-клубы через API Foursquare.

Когда я жестко кодирую название города в экземпляре класса, он работает нормально.Но когда я хочу передать ему динамическое значение (запрос из строки поиска, которую я получаю через DOM), он не узнает город.Вот код:

Класс: 

class Venues {
constructor(city) {
    this.id = '...';
    this.secret = '...';
    this.city = city;
}
async getVenues() {
    const response = await  fetch(`https://api.foursquare.com/v2/venues/search?near=${this.city}&categoryId=4bf58dd8d48988d1e7931735&client_id=${this.id}&client_secret=${this.secret}&v=20190309`);

    const venues = await response.json();

    return venues;
  }
}

const input = document.getElementById('search-input').value;
const button = document.getElementById('button');

const jazzClubs = new Venues(input);

button.addEventListener('click', (e) => {
    e.preventDefault();

    getJazzVenues();

})

function getJazzVenues() { 
jazzClubs.getVenues()
    .then(venues => {
        console.log(venues);
    })
    .catch(err => {
        console.log(err);
    });
}

Кто-нибудь знает, почему значение переменной input не распознается недавно созданной переменной jazzClubs?

Также, если у вас есть советы о том, как структурировать этот код лучше или аккуратнее, я буду рад любым предложениям (определение класса уже находится в отдельном файле).

Большое спасибо, ребята!

Адам

1 Ответ

0 голосов
/ 09 марта 2019

Необходимо убедиться, что следующие операторы запускаются после нажатия кнопки.

const input = document.getElementById ('search-input'). Value;

const jazzClubs = новые места проведения (вход);

Также ваш код выглядит слишком сложным. Используйте более простой код, используя jquery. Попробуйте что-то вроде этого: 

  $(document).ready(function() {

    $("#search-button").click(function() {
      var searchval = $("#search-input").val();
      var id = "xxx";
      var secret = "yyy";
      alert(searchval);
      var url = "https://api.foursquare.com/v2/venues/search?near=" + searchval + "&categoryId=4bf58dd8d48988d1e7931735&client_id=" + id + "&client_secret=" + secret + "&v=20190309";
      alert(url);
      $.ajax({
        url: url,
        dataType: 'json',
        success: function(data) {
          var venues = data.response.venues;
          alert(venues);
          $.each(venues, function(i, venue) {
            $('#venue-result').append(venue.name + '<br />');
          });
        }
      });

    });
  });
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <label>City:</label>
  <input type="text" id="search-input" />
  <button type="button" id="search-button">Search</button>
  <div id="venue-result"></div>
</body>

</html>
...