不知道如何使用带有把手的 jquery 获取 json 数据

Question

您好，我是 JSON 的新手，大家都说 JavaScript 模板引擎用于前端动态更改，但我无法继续帮助我

json 文件 data.json

    {
    users: [{
        username: "alan",
        firstName: "Alan",
        lastName: "Johnson",
        email: "alan@test.com"
    }, {
        username: "allison",
        firstName: "Allison",
        lastName: "House",
        email: "allison@test.com"
    }, {
        username: "ryan",
        firstName: "Ryan",
        lastName: "Carson",
        email: "ryan@test.com"
    }]
}

通过在 jquery 中使用 get 方法，我得到了 json 文件的响应

 $(function() {
    var raw_template = $('#entry-template').html();
    var template = Handlebars.compile(raw_template);
    var placeHolder = $("#3cols");
    $.get("js/data.json", function(datas, status, xhr) {
        $.each(datas, function(key, val) {
            var html = template(val);
            placeHolder.append(html);
        });
    });
})

我的模板就像

    <script id="entry-template" type="text/x-handlebars-template">          
     {{#each users}}
              <div class="col-md-4">
                <h2>{{username}}</h2>
                <p>{{firstName}}</p>
                <p><a href="">{{email}}</a>
                </p>
              </div>
        {{/each}}
    </script>

我想添加数据

 <div id="3cols" class="row"></div>

不知道发生了什么屏幕上没有显示，但在控制台中我得到来自 json 的响应但没有输出

Answer 1

使用该 JSON 和该模板，我认为模板中的 #each 已经遍历您的用户，因此您无需在 Javascript 中单独使用 .each() 执行此操作。我建议将您的 JS 更改为：

$(function() {
    var raw_template = $('#entry-template').html();
    var template = Handlebars.compile(raw_template);
    var placeHolder = $("#3cols");
    $.get("js/data.json", function(datas, status, xhr) {
        var html = template(datas);
        placeHolder.append(html);
    });
});

如果还是不行，那么我们需要看看datas到底是什么。您可以在执行 template(datas) 之前添加 console.log(datas)，这样我们就可以准确地看到您发送到模板的内容。