Valid JSON breaks HandlebarsJS and $.getJSON call

Question

Given html with an anchor and an handlebars/mustache's template:

<!-- 1. Anchor -->
<div id="anchor">Anchor</div>

<!-- 2. HTML-Mustache template -->
<script id="ẗpl" type="text/template">
    {{#people}}
       <li><b>{{family}} {{name}}</b> ({{title}}, {{place}}) : {{introduction}}.</li>
    {{/people}}
</script>

Given a data.json (proven valid & from an 3rd party website):

{
    "people": [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris",
            "introduction": "GIS cartographer, Gdal & D3js enthusiast, Cartographic workshop's dinosaure & rennovator"
        },
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala",
            "introduction": "GIS cartographer, D3js enthusiast, interactions designers & wikidata tinker"
        }
    ]
}

Given a JS handlebars.js call such :

var url = '//bl.ocks.org/hugolpz/raw/8075193/data.json?callback=?'; // get loaded successfully
// Action below fails:
$.getJSON(url, function (data) {
    var template = $('#tpl').html();
    var stone = Handlebars.compile(template)(data);
    $('#anchor').append(stone);
});

Why do I get and error Uncaught SyntaxError: Unexpected token : ?

How to make it works ?

JSfiddle: http://jsfiddle.net/YGwJ9/9/

---

Edit: When I restructure my JSON as

{
  "people"
  :
     [ 
       ... 
     ]
}

the error message point to the 3rd line with the ":".

Answer 1

I just tried it, and the problem is that //bl.ocks.org/hugolpz/raw/8075193/data.json?callback=callbackName is sending back JSON, not a valid JSONP callback. Because of the callback=? in your URL, jQuery will be expecting JSONP, not JSON. JSON != JSONP. JSON is a textual data notation. JSONP is a means of delivering JSON cross-domain using script tags. (Examples below.)

If you control what that URL returns, you can change it so that it wrap the JSON in the appropriate JSONP wrapper (basically putting the JSON inside a function call, where the name of the function comes from the callback parameter in the URL).

If you don't control what the URL returns, then unless that server supports CORS and it allows your origin and you're using a CORS-enabled browser, you won't be able to load that data cross-domain because of the Same Origin Policy.

---

Here's what that URL is sending back:

{ "people": [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris",
            "introduction": "GIS cartographer, Gdal & D3js enthusiast, Cartographic workshop's dinosaure & rennovator",
            "photo": "img/WikiAtlas_Lopez_Hugo_Yug.jpg",
            "twitter": "http://twitter.com/Hugo_lz"
        },
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala",
            "introduction": "GIS cartographer, D3js enthusiast, interactions designers & wikidata tinker",
            "photo": "img/WikiAtlas_Ganesh_Arun_Planemad.jpg",
            "twitter": "http://twitter.com/Edouard_lopez"
        },
        {
            "family": "Lopez",
            "name": "Edouard",
            "title": "support",
            "place": "Bordeaux",
            "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
            "photo": "img/WikiAtlas_Lopez_Edouard_Lyhana8.jpg",
            "twitter": "http://twitter.com/Plandemad"
        }
    ]
}

Here's a valid JSONP response:

callbackName({ "people": [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris",
            "introduction": "GIS cartographer, Gdal & D3js enthusiast, Cartographic workshop's dinosaure & rennovator",
            "photo": "img/WikiAtlas_Lopez_Hugo_Yug.jpg",
            "twitter": "http://twitter.com/Hugo_lz"
        },
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala",
            "introduction": "GIS cartographer, D3js enthusiast, interactions designers & wikidata tinker",
            "photo": "img/WikiAtlas_Ganesh_Arun_Planemad.jpg",
            "twitter": "http://twitter.com/Edouard_lopez"
        },
        {
            "family": "Lopez",
            "name": "Edouard",
            "title": "support",
            "place": "Bordeaux",
            "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
            "photo": "img/WikiAtlas_Lopez_Edouard_Lyhana8.jpg",
            "twitter": "http://twitter.com/Plandemad"
        }
    ]
})