CODEWITHSUNDEEP
jqueryjsonhandlebars.js
3gwebtrain
3gwebtrain

Reputation: 15303

Not able to get the html data from Json using Jquery with Handlebars.js template

I am having a json file, which has the json data like this :

{
    "username":"lgangula",
    "message":""
}

in the data.json file

i am getting the file, using jquery ajax method and appending the data using the Handlebars.js; here is the function:

var JsonHandler = function(url) {
        return $.getJSON(url)
};

(function ($) {

    var manupulate = function(data){
        $.each(data, function(key,value){
            if(key === "username"){
                            console.log(value) // i am getting the name
                var x = Handlebars.compile($("#header-template").html());
                console.log(x(value));//i am getting the elements, without the value..!?
            }
        })
    }


    var path = "js/data.json";
    new JsonHandler(path).done(function(data){
        manupulate(data);
    })

})(jQuery);

I am not getting the value in my html out put. here is the template i am use :

<script id="header-template" type="text/x-handlebars-template">
        <div class="loginInfo"> <a href="#">{{username}}</a> | <a href="#">Logout</a> </div>
    </script>

what is going wrong here.. any one can help me please?

even i tried this way again:

(function ($) {

    var x = {"username":"lgangula"}


    var manupulate = function(data){
        $.each(x, function(key,value){
            if(key === "username"){
                console.log(value);//consoling the name
                var x = Handlebars.compile($("#header-template").html());
                console.log(x(value)); //no result here.
                            console.log(x({"username":"lgangula"})); //works fine
            }
        })
    }

    manupulate();

})(jQuery);

still not working..

in case if i pass the object like this, it works..

console.log(x({"username":"lgangula"})); //works fine

Upvotes: 0

Views: 748

Answers (1)

Amar
Amar

Reputation: 6942

You haven't render template try this,

var template = Handlebars.compile($("#header-template").html());
 var html =  template(x)
 console.log(html)

Upvotes: 1

Related Questions