jquery - 将外部 JSON 文件读入动态 HTML 表

Question

我正在尝试使用 jQuery 将 JSON 文件读取到动态 HTML 表中。具体来说，我正在尝试在 body 类的 div 内创建表格。我一直在关注http://www.encodedna.com/jquery/read-json-file-push-data-into-array-and-convert-to-html-table-using-jquery.htm但是当我查看网页时，表格没有创建。我确定我已将 $.getJSON 指向正确的文件路径。如果您想查看任何特定代码，我将使用它进行编辑。提前致谢。

编辑 - 添加脚本代码

<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("/js/na_lcs_results.json", function(data) {

            var arrItems = [];
            $.each(data, function(index, value) {
                arrItems.push(value);
            });

            //Extract value for table header
            var col = [];
            for (var i = 0; i < arrItems.length; i++) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        //Create dynamic table
        var table = document.createElement("table");

        //Create HTML table header using extracted headers
        var tr = table.insertRow(-1);

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        //Add JSON data to table as rows
        for (var i = 0; i < arrItems.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = arrItems[i][col[j]];
            }
        }

        //Add new table with JSON data to container
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        });
    });

---

编辑 - 我要添加到的 Div 类

<div class="NA_LCS">
<h1>Welcome to the NA LCS page</h1>
    <div id="showData"></div>
</div>

---

编辑 - 表格的外部 CSS 页面

table, th, td {
margin: 10px 0;
border: solid 1px #333;
padding: 2px 4px;
font: 15px Abel; }

---

< script >
  $('#home_button').click(function() {
    $('.home_screen').fadeIn();
    $('#mySidebar,.EU_LCS,.NA_LCS').fadeOut();
  });

$('#EU_LCS_button').click(function() {
  $('.EU_LCS').fadeIn();
  $('#mySidebar,.home_screen,.NA_LCS').fadeOut();
});

$('#NA_LCS_button').click(function() {
  $('.NA_LCS').fadeIn();
  $('#mySidebar,.home_screen,.EU_LCS').fadeOut();
}); <
/script>

<
script >
  function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
  }

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
} <
/script>


<!-- <script type="text/javascript">
$(document).ready(function() {
  $.getJSON("/js/na_lcs_results.json", function(data) {

      var arrItems = [];
      $.each(data, function(index, value) {
        arrItems.push(value);
      });

      //Extract value for table header
      var col = [];
      for (var i = 0; i < arrItems.length; i++) {
        if (col.indexOf(key) === -1) {
          col.push(key);
        }
      }
    }

    //Create dynamic table
    var table = document.createElement("table");

    //Create HTML table header using extracted headers
    var tr = table.insertRow(-1);

    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th");
      th.innerHTML = col[i];
      tr.appendChild(th);
    }

    //Add JSON data to table as rows
    for (var i = 0; i < arrItems.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        tabCell.innerHTML = arrItems[i][col[j]];
      }
    }

    //Add new table with JSON data to container
    var divContainer = document.getElementById("showData"); divContainer.innerHTML = ""; divContainer.appendChild(table);
  });
}); -->
<
/script>

<
script >
  $(document).ready(function() {
    $('#tabs').tabs();
    $("accordion1").accordion();
    $("#accordion2").accordion();
  }); <
/script>

#mySidebar img {
  width: 32px;
  height: 32px;
}

.home_screen {
  margin: 70px;
}

.NA_LCS {
  display: none;
  margin: 70px;
}

.EU_LCS {
  display: none;
  margin: 70px;
}

body {
  background-color: #8c8c8c;
}

#banner {
  background-image: url('../img/lol_universe_bg.jpg');
  background-size: cover;
  background-position: center;
  width: 800;
  height: 300px;
}

h1 {
  font-family: 'Abel';
  font-size: 48px;
  text-align: center;
}

table,
th,
td {
  margin: 10px 0;
  border: solid 1px #333;
  padding: 2px 4px;
  font: 15px Abel;
}

th {
  font-weight: bold:
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>LoL Universe</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Abel">
  <link rel="stylesheet" type="text/css" href="css/mystylesheet.css">
</head>

<body>

  <div class="w3-sidebar w3-bar-block w3-black w3-animate-left" style="display:none" id="mySidebar">
    <button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Close &times;</button>
    <a href="#" class="w3-bar-item w3-button" id="home_button"><img src="img/icon_home.png"></a>
    <a href="#" class="w3-bar-item w3-button" id="EU_LCS_button"><img src="img/EU_LCS_logo.png"></a>
    <a href="#" class="w3-bar-item w3-button" id="NA_LCS_button"><img src="img/NA_LCS_logo.png"></a>
  </div>

  <div class="nav_button">
    <button class="w3-button w3-white w3-xxlarge" onclick="w3_open()">&#9776;</button>
  </div>

  <div id="banner"></div>

  <div class="home_screen">
    <h1>Welcome to LoL Universe</h1>
  </div>

  <div class="EU_LCS">
    <h1>Welcome to the EU LCS page</h1>
  </div>

  <div class="NA_LCS">
    <h1>Welcome to the NA LCS page</h1>
    <!-- <div id="showData"></div> -->
  </div>

</body>

</html>

Answer 1

虽然我希望您已经找到了解决方案，但这里有一些更多的细节可以帮助人们登陆此页面。

似乎一些小修复 可以使您的代码正常工作(列出使用 jQuery 从本地 JSON 文件数据创建动态 TABLE)。UI/CSS 方面不会在此答案中处理。

简而言之，使用 encodedna.com 片段时，请正确复制它们 :)

要在此处解决您的问题:首先(虽然不是必需的)创建一个单独的 JavaScript 文件以使 HTML 简短且更具可读性...

myjavascript.js

$(document).ready(function() {

    $.getJSON("na_lcs_results.json", function(data) {
        var arrItems = [];
        $.each(data, function(index, value) {
            arrItems.push(value);
        });

        // extract value for table header
        var col = [];
        for (var i = 0; i < arrItems.length; i++) {
            for (var key in arrItems[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }
        // create dynamic table
        var table = document.createElement("table");

        // create HTML table header using extracted headers
        var tr = table.insertRow(-1);

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // add JSON data to table as rows
        for (var i = 0; i < arrItems.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = arrItems[i][col[j]];
            }
        }

        // add new table with JSON data to container
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    });
});

$('#home_button').click(function() {
    $('.home_screen').fadeIn();
    $('#mySidebar,.EU_LCS,.NA_LCS').fadeOut();
});

$('#EU_LCS_button').click(function() {
    $('.EU_LCS').fadeIn();
    $('#mySidebar,.home_screen,.NA_LCS').fadeOut();
});

$('#NA_LCS_button').click(function() {
    $('.NA_LCS').fadeIn();
    $('#mySidebar,.home_screen,.EU_LCS').fadeOut();
});

function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}

/*
$(document).ready(function() {
    $('#tabs').tabs();
    $("accordion1").accordion();
    $("#accordion2").accordion();
});
*/

然后从您之前的代码中删除所有 JavaScript/jQuery 代码，并更新您的 HTML 代码，如下所示:

...
  <div class="NA_LCS">
    <h1>Welcome to the NA LCS page</h1>
    <div id="showData"></div>
  </div>

  <script type="text/javascript" src="myjavascript.js"></script>

</BODY>
...

可能更好地构建此代码并使用干净的代码序列提出问题会有所帮助......希望这会有所帮助!