Question

我正在尝试使用JSON文件填充表格。当我通过浏览器运行此程序时，第一行将填充。但是其他行则没有。有人可以向我指出我做错了什么吗？我没有正确循环吗？预先谢谢你。

$(document).ready(function() {
$.getJSON( "data.json", function(data) {
  var htmlToRender= [];
    var item;
    for (var i = 0; i < data.length; i++) {  
      item = data[i];
      console.log(data[i]);
      htmlToRender = '<tr><td>' + item.name + '</td>'
                     '<td>' + item.description + '</td>'
                     console.log(item.description)
                     '<td><a href="https://www.google.com/maps?q=' + item.location + '">Open In Google Mapspwd</a></td></tr>';
                     console.log(item.location);
                     $('#hot-spots').append(htmlToRender);
                     console.log(htmlToRender);
             };
         });
     });

Answer 1

htmlToRender = '<tr><td>' + item.name + '</td>'之后的几行看起来有些可疑-您错过了一个+符号来连接这些附加字符串，并且在字符串构建没有帮助的情况下撒了console.log原因。

我建议使用字符串模板：

const item = {
  name: "hello",
  description: "world",
  location: "somewhere"
};

const htmlToRender = `
  <tr>
    <td>${item.name}</td>
    <td>${item.description}</td>
    <td>
      <a href="https://www.google.com/maps?q=${item.location}">Open In Google Maps</a>
    </td>
  </tr>
`;
$('#hot-spots').append(htmlToRender);

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="hot-spots"></table>

表未按预期使用Jquery填充

1 个答案: