Не удалось получить значение

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

Я бы просто создал или использовал универсальную функцию плагина c 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>