jQuery getJSON data not loading into tmpl

Question

I am attempting to load some json into a jQuery tmpl.

The page is here: http://stefairclough.com/jsontest/

$(document).ready(function() {

    $.getJSON("http://stefairclough.com/jsontest/json.json",
            function(data){
                $("#news_articles").empty();
                $("#news_template").tmpl( data ).appendTo("#news_articles");
            })
            .error(function(xhr) {
                    console.log(xhr)
            });             
});

The json is at http://stefairclough.com/jsontest/json.js

I can't seem to figure out why it won't work.

Answer 1

Seems that your XHR request is failing. Try to provide a JSON header with your JSON file. Try renaming your file :

http://stefairclough.com/jsontest/json.json

Answer 2

Your JSON does not appear to be valid JSON.

Please try linting your JSON using the following: http://pro.jsonlint.com/

Answer 3

Your json test file has a trailing ; remove that

[
    {"Headline": "Headline Test 1", "Url": "http://stefairclough.com"}, 
    {"Headline": "Headline Test 2", "Url": "http://stefairclough.com"}, 
    {"Headline": "Headline Test 3", "Url": "http://stefairclough.com"}
]; <--- here

Answer 4

just put your JS files above your script template

1.

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

2.

<script id="news_template" type="text/x-jquery-tmpl">
        <div class="news_item">
            <h3>${Headline}</h3>
            <p>Source: <a href="${Url}" target="_blank">${Url}</a>
        </div>
    </script>

3. Then

   $(document).ready(function() {

       $.getJSON("http://stefairclough.com/jsontest/json.js",
               function(data){
                   $("#news_articles").empty();
                   $("#news_template").tmpl( data ).appendTo("#news_articles");
               })
               .error(function(xhr) {
                       console.log(xhr)
               });             
   });
   </script>