GetJSON jquery 返回未定义

Question

I am trying to get my search box to work and do a getJSON on text search and title. but in the console log, I get text=undefined?title=undefined. so it is not displaying any JSON. Not sure if my click is working correctly or if I have to make my JSON objects?

Script

 <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,
                },

Answer 1

The problem is because you only read the values from the field when the page first loads and it is empty. To fix this, move that logic inside the click handler.

The next issue is that you should remove this from $('input[type="text"]', this) . You don't need a contextual selector here, and this one is incorrect regardless.

Also note that a valid querystring starts with ? and separates each value with & , so your url concatenation needs to be amended slightly. In addition you shouldn't update the url value on every click. If you do it this way your AJAX request will only work once.

Lastly the metadata in your response is an object, not an array. data is the array so you need to loop over that instead. The loop can also be simplified by using map() . Try this:

$(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);
      }
    });
  });
});