Question

我必须使用.getJson方法下载文件并将其显示在页面上。我需要帮助以表格格式显示行，但我的代码却显示在整个页面上。

$(document).ready(function () {
    $.getJSON("data.json", function (data) {
        var topSpot = '';

        $.each(data, function (key, value) {

            $("table").append("<tr>");
            $("table").append("<td>" + value.name + "</td>");
            $("table").append("<td>" + value.description + "</td>");
            $("table").append("<td>" + value.link + "</td>");

            var link = 'https://www.google.com/maps?q=' + value.location[0] + ',' +
                value.location[1];

            topSpot += '<td>' + '<a class="btn" href="' + link + '">Google Maps 
            location</a > ' + '</td > '; 

            topSpot += '</tr>';
        });
        $('#table').append(topSpot);
    });
});

Answer 1

在这些情况下，您可以使用Template literals，可以达到我认为更易于阅读的结果。请考虑以下示例。

编辑：为了在实现中使用$ .getJSON，我编辑了答案，为了简单起见，我从https://jsonplaceholder.typicode.com/获取数据。逻辑几乎相同。此处的区别是在$ .getJSON回调中执行渲染逻辑。

function render() {
    $.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
      const output = document.querySelector('#output');
      const rows = data.map(toTableRows).join('');

      output.innerHTML = `<table>
        <tbody>${rows}</tbody>
      </table>`;
    });
}

function toTableRows(data) {
  return `
      <tr>
          <td>${data.title}</td>
          <td>${data.body}</td>
      </tr>`;
}

render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="output"></div>
</body>
</html>

Answer 2

我认为整个页面的主要原因是缺少正确的css类，这些类无法应用于正在生成的html表。修复创建具有正确类型的属性的div容器，然后使用$（'＃table'）。append（topSpot）将表放入其中，并将CSS应用于表元素。有多个插件可提供具有多种功能的受控表格输出，例如排序，搜索，编辑等。 http://tabulator.info/或您可以探索的简单插件（如jsontotable）

<div id="jsontotable" class="jsontotable"></div>

var data = [{'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}, {'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}];
$.jsontotable(data, { id: '#jsontotable', header: false });

我如何遍历对象并以格式显示表行

2 个答案: