Динамически кодировать пользовательский ввод API с использованием getJSON - PullRequest
Новая
       73

Динамически кодировать пользовательский ввод API с использованием getJSON

1 голос
/ 02 декабря 2019

Я пытаюсь использовать Unsplash API для генерации изображений с использованием ввода пользователя. До сих пор я мог получать изображения, когда запрос = жестко закодирован, но я хочу, чтобы результаты варьировались в зависимости от того, что пользователь вводит и отправляет в запрос. Ниже я жестко запрограммировал «собаку» в качестве ввода запроса.

Вот мой код: 

var client_id = "fcbcd3e60e7f6615d0e5c64ab8e830d9695c4c30a74586e8d234f9835923ad75";

$("#fieldsubmit").click(function(){
  query = $("#query").val();
})

$.getJSON('https://api.unsplash.com/search/photos?page=1&query=dog&client_id=fcbcd3e60e7f6615d0e5c64ab8e830d9695c4c30a74586e8d234f9835923ad75', function(data) {
  console.log(data);

  var imageList = data.results;
  $.each(imageList, function(i, val) {

    var image = val;
    var imageURL = val.urls.regular;
    var imageWidth = val.width;
    console.log(imageURL);

  $('.grid').append('<div class="image"><img src="'+ imageURL +'"</div>')

  });
});

1 Ответ

2 голосов
/ 02 декабря 2019

Либо поместите вызов JSON в функцию, которая будет вызываться в обратном вызове обработчика щелчков, либо добавьте его в сам обратный вызов (как я это сделал ниже), и используйте шаблонный шаблон длявстроить переменные прямо в строку. 

$("#fieldsubmit").click(function(){
  const query = $("#query").val();
  const endpoint = 'https://api.unsplash.com/search/photos';
  const page = 1;
  $.getJSON(`${endpoint}?page=${page}&query=${query}&client_id=${client_id}`, function(data) {
    // ...
   });
});
...