javascript - JSON files into HTML table

I'm trying to display a table based on JSON data. My JSON is formatted like this as spellData.json in my local directory:

[["Flash", 22722], ["Ignite", 5126], ["Heal", 4666], ["Smite", 3970], ["Teleport", 3892], ["Exhaust", 3118], ["Mark", 2495], ["Ghost", 571], ["Barrier", 459], ["Clarity", 239], ["Cleanse", 132], ["Clairvoyance", 10]]

I need to iterate through this data, and create a table that looks something like:

Spell : Occurrences

So far, index.html looks like this:

        <html>
<head>
    <link type="text/css" rel="stylesheet" href="css/mon.css"/>
    <script type="text/javascript" src=".6.2/jquery.min.js"> </script>
    <script>
        $(function() {
            $.getJSON('spellData.json', function(data) {
                var tr;
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i][0] + "</td>");
                    tr.append("<td>" + data[i][1] + "</td>");
                    $('table').append(tr);
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <th> Spell </th>
            <th> Occurences </th>
        </tr>
    </table>
</body>

On my side, only "Spell Occurrences" show up, and not the json data.

Any help is appreciated! Thanks.

UPDATE: It seems like the code seems to work on other people's end.. But when I open index.html with a chrome, I only get "Spell Occurrences" and not the json data.

UPDATE: It seems like the problem was that Chrome doesn't support cross origin requests, so I can't do .getJSON with local files.

I'm trying to display a table based on JSON data. My JSON is formatted like this as spellData.json in my local directory:

[["Flash", 22722], ["Ignite", 5126], ["Heal", 4666], ["Smite", 3970], ["Teleport", 3892], ["Exhaust", 3118], ["Mark", 2495], ["Ghost", 571], ["Barrier", 459], ["Clarity", 239], ["Cleanse", 132], ["Clairvoyance", 10]]

I need to iterate through this data, and create a table that looks something like:

Spell : Occurrences

So far, index.html looks like this:

        <html>
<head>
    <link type="text/css" rel="stylesheet" href="css/mon.css"/>
    <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script>
        $(function() {
            $.getJSON('spellData.json', function(data) {
                var tr;
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i][0] + "</td>");
                    tr.append("<td>" + data[i][1] + "</td>");
                    $('table').append(tr);
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <th> Spell </th>
            <th> Occurences </th>
        </tr>
    </table>
</body>

On my side, only "Spell Occurrences" show up, and not the json data.

Any help is appreciated! Thanks.

UPDATE: It seems like the code seems to work on other people's end.. But when I open index.html with a chrome, I only get "Spell Occurrences" and not the json data.

UPDATE: It seems like the problem was that Chrome doesn't support cross origin requests, so I can't do .getJSON with local files.

Share Improve this question edited Aug 30, 2015 at 1:42 asked Aug 30, 2015 at 1:08 byInduction 4751 gold badge6 silver badges13 bronze badges

1 works fine on my end... are you sure the spellData.json is in the correct directory? – Matthew Vita Commented Aug 30, 2015 at 1:14
Yes, it is in the same local directory as my index.html. It is only showing "Spell Occurrences" but not the json data – byInduction Commented Aug 30, 2015 at 1:16
Tried moving script block containing $.getJSON to after </table> , before </body> ? – guest271314 Commented Aug 30, 2015 at 1:17
When do you get when you console.log(data) at the beginning of the $.getJSON block? – strider Commented Aug 30, 2015 at 1:19
@guest271314 Just tried it, but json data still don't show up. – byInduction Commented Aug 30, 2015 at 1:19

| Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

js at Question appear to return expected results ?

var data = [
  ["Flash", 22722],
  ["Ignite", 5126],
  ["Heal", 4666],
  ["Smite", 3970],
  ["Teleport", 3892],
  ["Exhaust", 3118],
  ["Mark", 2495],
  ["Ghost", 571],
  ["Barrier", 459],
  ["Clarity", 239],
  ["Cleanse", 132],
  ["Clairvoyance", 10]
];

var tr;
for (var i = 0; i < data.length; i++) {
  tr = $('<tr/>');
  tr.append("<td>" + data[i][0] + "</td>");
  tr.append("<td>" + data[i][1] + "</td>");
  $('table').append(tr);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<table>
  <tbody>
    <tr>
      <th>Spell</th>
      <th>Occurences</th>
    </tr>
  <tbody>
</table>

Ensure spellData.json is in the same directory as index.html
consider using a simple web server to serve your files (https://www.npmjs./package/local-web-server)

and add promise chains so you can see any errors:

$(function() {
    $.getJSON('spellData.json')
     .success(function(data) {
        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i][0] + "</td>");
            tr.append("<td>" + data[i][1] + "</td>");
            $('table').append(tr);
        }
    })
    .error(function(e) { console.error(e); })
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JSON files into HTML table - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)