JSON files into HTML table

Question

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/common.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/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.

works fine on my end... are you sure the spellData.json is in the correct directory? — Matthew Vita
– 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
– byInduction, Commented Aug 30, 2015 at 1:16
Tried moving script block containing $.getJSON to after </table> , before </body> ? — guest271314
– 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
– strider, Commented Aug 30, 2015 at 1:19
@guest271314 Just tried it, but json data still don't show up. — byInduction
– byInduction, Commented Aug 30, 2015 at 1:19

guest271314 · Accepted Answer · 2015-08-30 01:18:34Z

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.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<table>
  <tbody>
    <tr>
      <th>Spell</th>
      <th>Occurences</th>
    </tr>
  <tbody>
</table>

answered Aug 30, 2015 at 1:18

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

Rob None Over a year ago

League of legends rulez! Your answer helped me a lot, thanks!

Matthew Vita · Accepted Answer · 2015-08-30 01:20:01Z

0

Ensure spellData.json is in the same directory as index.html
consider using a simple web server to serve your files (https://www.npmjs.com/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); })
});

answered Aug 30, 2015 at 1:20

Matthew Vita

2132 silver badges15 bronze badges

Collectives™ on Stack Overflow

JSON files into HTML table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related