无法获取值

Question

I'm a beginner developer, and today I tried to do a search for ajax and get the results below. And after doing this, if you try to run it, you can say "undefind". How can I solve this?

This is where you type.

<input id="word" type="text" placeholder="test type">
<input type="button" id="btn" value="click">

And this is a script.

 $("#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

I would just create or use a generic jQuery plugin function to convert the JSON data to a table element.

Also, I recommend using fetch instead of $.ajax, because it returns a promise and it is a more modern way to obtain API data.

(($) => {
  $.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>

</div>