Handlebars not working. What am I doing wrong?

Question

JavaScript

There is this block:

<div class="hand">
<script id="objects" type="text/x-handlebars-template">
{{#each objects}}
<h3>{{title}}</h3>
 <p>{{description}}
<a href="{{link}}">Ссылка</a>
</p>
{{/each}}
 </script>
</div>

Here is what I have in the data.json file

{
    "objects": [
       {
         "title":"Заголовок",
           
         "description":"Какой то текст",
           
         "link":"https://toster.ru/question/new"
       }
    ]
}

Смотрел несколько уроков. Почему некоторые используют ajax а некоторые нет? 
Вот что я находил.

var data = {
   name : 'John Doe'
},

var template = Handlebars.compile( $('#objects').html() );
$('.hand').append( template(data) );

As I understand

var data = {
   name : 'John Doe'
},

is written to js file not to json? Why then did I write in json what is above? (Did according to the lesson on YouTube)

Ajax was used in this lesson

$(document).ready(function () {
    
    var hand = $('.hand');
    
$.ajax({
    url: 'data.json' 
}).done(function(data){
    var json = JSON.parse(data),
        source = $("#objects").html(),
        template = Handlebars.compile(source),
        html = template(json);
    
    $('.hand').append( template(data) );
})
});

But this doesn't work for me either. What am I doing wrong?

Answer 1

Maybe because you need to write $('.hand').append( json ):

Answer 2

Try to lay out a template from the resulting block.

<script id="objects" type="text/x-handlebars-template">
{{#each objects}}
<h3>{{title}}</h3>
 <p>{{description}}
<a href="{{link}}">Ссылка</a>
</p>
{{/each}}
 </script>

<div class="hand">

</div>

And in the version with AJAX

$(document).ready(function () {
    
    var hand = $('.hand');
    
$.ajax({
    url: 'data.json' 
}).done(function(data){
    var json = JSON.parse(data),
        source = $("#objects").html(),
        template = Handlebars.compile(source),
        html = template(json);
    
    $('.hand').append( html );             //-- было template(data)
})
});