Fetch JSON File

Question

I want to fetch a json file (Steam API) and want to show the file ordered in a table. I have tried it with a button and a list but it doesn't work. And i don't know how to do this with a table.

<html>
<head>
    <title>JSON</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $("button").click( function() {
        $.getJSON( "json_data.json", function(obj) { 
            $.each(obj, function(key, value) { 
                $("ul").append("<li>"+value.name+"</li>");
            });
        });
    });;
</script>
<body>
    <ul></ul>
    <button>Refresh</button>
</body>
</html>

Josh Harrison · Accepted Answer · 2015-02-06 10:03:53Z

Your code itself is good! But when you select $("button"), the browser hasn't actually got to processing the button tag itself yet, so it doesn't exist at that point and the click event is not registered.

There are two solutions:

Move the <script> tags to the end inside the <body> tag, in which case the <button> will exist by the time the script is parsed.

You can keep your <script> tag where it is, but wrap the entire script in jQuery's $(document).ready() handler, which executes its callback function when the entire document is parsed and ready to read:

<script type="text/javascript">
    $(document).ready(function() {
        $("button").click( function() {
            $.getJSON( "json_data.json", function(obj) { 
                $.each(obj, function(key, value) { 
                    $("ul").append("<li>"+value.name+"</li>");
                });
            });
        });
    });
</script>

Rory McCrossan · Accepted Answer · 2015-02-06 09:53:25Z

1

As your jQuery code is in the body, it should go just before the </body> tag so that all the elements are can be accessed in the DOM. Your current code is running before the button or ul elements exist.

Try this:

<html>
<head>
    <title>JSON</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <ul></ul>
    <button>Refresh</button>

    <script type="text/javascript">
        $("button").click(function() {
            $.getJSON("json_data.json", function(obj) { 
                $.each(obj, function(key, value) { 
                    $("ul").append("<li>" + value.name + "</li>");
                });
            });
        });
    </script>
</body>
</html>

answered Feb 6, 2015 at 9:53

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

3 Comments

low_rents Over a year ago

that's what the document ready function is made for: $(function() { /* DOM loaded for all the code here */});

Rory McCrossan Over a year ago

@northkildonan that applies if the script is in the head. At the end of the body all elements are available in the DOM, so it's not needed.

low_rents Over a year ago

@RoryMcCrossan ah, yes. just saw he didn't have it inside the head at all.

Bitwise Creative · Accepted Answer · 2015-02-06 09:58:50Z

0

<html>
<head>
    <title>JSON</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $("button").click( function() {
        $.getJSON( "json_data.json", function(obj) { 
            $.each(obj, function(key, value) { 
                $("ul").append("<li>"+value.name+"</li>");
            });
        });
    });
});
</script>
<body>
    <ul></ul>
    <button>Refresh</button>
</body>
</html>

Wrapping your JS with $(function() { - }); will wait until the DOM is loaded before executing your script.

answered Feb 6, 2015 at 9:58

Bitwise Creative

4,0805 gold badges31 silver badges35 bronze badges

Collectives™ on Stack Overflow

Fetch JSON File

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related