获取值失败

Question

我是一名初学者开发人员，今天我尝试搜索 ajax 并得到以下结果。完成此操作后，如果您尝试运行它，您可以说“undefind”。我该如何解决这个问题？这是您打字的地方。<input id="word" type="text" placeholder="test type"><input type="button" id="btn" value="click">这是一个脚本。 $("#btn").click(function search(target) {    var word = target.value      $.ajax({          url : "url"+word,           dataType :"json",          success : function(data) {              var tb =$("<table />");              for(var i in data);{                  var $addr =data[i].addr;                  var $code =data[i].cdoe;                  var $created_at =data[i].created_at;                  var $lat =data[i].lat;                  var $lng =data[i].lng;                  var $name =data[i].name;                  var $stock_at =data[i].stock_at                  var row =$("<tr />").append(                      $("<td />").text($addr),                      $("<td />").text($code),                      $("<td />").text($created_at),                      $("<td />").text($lat),                      $("<td />").text($lng),                      $("<td />").text($name),                      $("<td />").text($stock_at),                  );                  tb.append(row);              }              $(".wrap").append(tb);          },     });  });

Answer 1

我只是创建或使用通用 jQuery 插件函数将 JSON 数据转换为表元素。

另外，我建议使用fetch而不是$.ajax，因为它返回一个承诺，并且它是获取 API 数据的更现代的方式。

(($) => {

  $.jsonToTable = function() {

   let fields = Object.keys(data[0]);

   return $('<table>')

      .append($('<thead>').append($('<tr>')

        .append(fields.map(field => {

          return $('<th>').text(field);

        }))))

      .append($('<tbody>').append(data.map(record => {

        return $('<tr>').append(fields.map(field => {

          return $('<td>').text(record[field]);

        }));

      })));

    };

})(jQuery)

const data = [

  { addr : 1, code : 1, create_at : 1, lat : 1, lng : 1, name : 1, stock_at : 1 },

  { addr : 2, code : 2, create_at : 2, lat : 2, lng : 2, name : 2, stock_at : 2 },

  { addr : 3, code : 3, create_at : 3, lat : 3, lng : 3, name : 3, stock_at : 3 },

  { addr : 4, code : 4, create_at : 4, lat : 4, lng : 4, name : 4, stock_at : 4 }

];

$('.wrap').append($.jsonToTable(data)); // Or use the button click method below...

$("#btn").click(function search(target) {

  var word = target.value;

  fetch("url" + word)

    .then(response => response.json())

    .then(json => $('.wrap').append($.jsonToTable(json)));

});

table { border-collapse: collapse; margin-top: 1em; }

table, th, td { border: thin solid grey; }

th, td { padding: 0.33em; }

thead tr { background: #D7D7D7 }

tbody tr:nth-child(even) { background: #F7F7F7;  }

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

<input id="word" type="text" placeholder="test type">

<input type="button" id="btn" value="click">

<div class="wrap"></div>