将外部JSON文件读取到动态HTML表中

Question

I'm trying to read a JSON file into a dynamic HTML table using jQuery. Specifically, I'm trying to create the table inside a div within the body class. I've been following http://www.encodedna.com/jquery/read-json-file-push-data-into-array-and-convert-to-html-table-using-jquery.htm but when I view the webpage the table doesn't get created. I'm sure that I've pointed $.getJSON to the correct filepath. If you would like a look at any specific code I'll edit with it. Thanks in advance.

Edit - adding script code

<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);
        });
    });

---

Edit - the Div class I'm trying to add to

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

---

Edit - external CSS page for table

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

Although I hope you've already found the solution, here are some more details to help people landing on this page.

It seems that some little fixes can make you code works (at list the dynamic TABLE creation from the local JSON file data using jQuery). The UI/CSS aspect won't be dealt in this answer.

In short when using encodedna.com snippets, copy them properly :)

To fix your issue here: first (although not necessary) create a separate JavaScript file to make the HTML short and more readable...

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();
});
*/

Then remove all the JavaScript/jQuery code from your previous code and update your HTML code as follow:

...
  <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>
...

Probably that structuring this code better and asking the question with clean code sequence would have helped... hope this helps!