Получить JSON jquery возвращает неопределенное - PullRequest
Новая
       61

Получить JSON jquery возвращает неопределенное

1 голос
/ 19 марта 2020

Я пытаюсь заставить работать окно поиска и получить JSON для текстового поиска и заголовка. но в журнале консоли я получаю текст = undefined? title = undefined. поэтому он не отображает JSON. Не уверен, что мой клик работает правильно или мне нужно создавать объекты JSON?

Сценарий 

 <script>
     var searchstring = $('input[type="text"]', this).val();
     var url = "https://data.edu/api/v1/metadata";

     url += "?text=" + searchstring;
     url += "?title=" + searchstring;


    $(document).ready(function() {
        $('button[type="button"]').click(function(event){

           $.ajax({
            type: "GET",
            url: url,

            success: function(res){
                console.log(res);
                  var items = res.data.metadata;
                  var ins = "";
                  for (var i = 0; i < items.length; i++){
                    ins += "<div>";
                    ins += "Title" + items[i].title;
                    ins += "Title" + items[i].title;
                    ins += "Title" + items[i].title;
                    ins += "</div><br />";
                  };
                  $('#results').html(ins);
                }

            });         
        });
     });

  </script>

html

              <form class="destinations-form"  role="search" >
                 <div class="input-line">
                    <input id="searchForm"  type="text"  class="form-input check-value" placeholder="Search Documents" />

                    <button type="button"  class="form-submit btn btn-special"  "</button>

                 </div>
              </form>
               <div class="container">
                  <div class="hero-text align-center">
                     <div id="results"></div>
                  </div>
              </div>

json

data: [
    {
        collection_id: "ADGM-1552427432270-483",
        metadata:{
                   year: "2019",
                   files: text ,
                   title: text,
                },

1 Ответ

2 голосов
/ 19 марта 2020

Проблема в том, что вы читаете значения из поля только тогда, когда страница загружается впервые и она пуста. Чтобы это исправить, переместите эту логику c в обработчик click.

Следующая проблема заключается в том, что вы должны удалить this из $('input[type="text"]', this). Здесь вам не нужен контекстный селектор, и этот, несмотря ни на что, некорректен.

Также обратите внимание, что допустимая строка запроса начинается с ? и разделяет каждое значение с &, поэтому ваша url требует объединения быть слегка изменены. Кроме того, вы не должны обновлять значение url при каждом клике. Если вы сделаете это таким образом, ваш запрос AJAX будет работать только один раз.

Наконец, metadata в вашем ответе - это объект, а не массив. data - это массив, поэтому вместо него вам нужно l oop. L oop также можно упростить с помощью map(). Попробуйте это: 

$(document).ready(function() {
  const url = "https://data.edu/api/v1/metadata";

  $('button[type="button"]').on('click', function(e) {
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        let html = res.data.map(item => `<div>Title ${item.metadata.title}</div><br />`);
        $('#results').html(html);
      }
    });
  });
});
...