I'm having a small issue when I'm compiling a template with Handlebars.js . I have a JSON text file which contains an big array with objects : Source ; and I'm using XMLHTTPRequest to get it and then parse it so I can use it when compiling the template.

So far the template has the following structure :

<div class="product-listing-wrapper">
<div class="product-listing">
    <div class="left-side-content">
        <div class="thumb-wrapper">
            <img src="{{ThumbnailUrl}}">
        </div>
        <div class="google-maps-wrapper">
            <div class="google-coordonates-wrapper">
                <div class="google-coordonates">
                    <p>{{LatLon.Lat}}</p>
                    <p>{{LatLon.Lon}}</p>
                </div>
            </div>
            <div class="google-maps-button">
                <a class="google-maps" href="#" data-latitude="{{LatLon.Lat}}" data-longitude="{{LatLon.Lon}}">Google Maps</a>
            </div>
        </div>
    </div>
    <div class="right-side-content"></div>
</div>

And the following block of code would be the way I'm handling the JS part :

$(document).ready(function() {

/*
    Default Javascript Options
    ~a javascript object which contains all the variables that will be passed to the cluster class
*/
var default_cluster_options = {
    animations              : ['flash', 'bounce', 'shake', 'tada', 'swing', 'wobble', 'wiggle', 'pulse', 'flip', 'flipInX', 'flipOutX', 'flipInY', 'flipOutY', 'fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUpBig', 'fadeInDownBig', 'fadeInLeftBig', 'fadeInRightBig', 'fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUpBig', 'fadeOutDownBig', 'fadeOutLeftBig', 'fadeOutRightBig', 'bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'lightSpeedIn', 'lightSpeedOut', 'hinge', 'rollIn', 'rollOut'],
    json_data_url           : 'data.json',
    template_data_url       : 'template.php',
    base_maps_api_url       : 'https://maps.googleapis.com/maps/api/js?sensor=false',
    cluser_wrapper_id       : '#content-wrapper',
    maps_wrapper_class      : '.google-maps',
};

/*
    Cluster
    ~main class, handles all javascript operations
*/
var Cluster = function(environment, cluster_options) {

        var self = this;

        this.options = $.extend({}, default_cluster_options, cluster_options);
        this.environment = environment;
        this.animations = this.options.animations;
        this.json_data_url = this.options.json_data_url;
        this.template_data_url = this.options.template_data_url;
        this.base_maps_api_url = this.options.base_maps_api_url;
        this.cluser_wrapper_id = this.options.cluser_wrapper_id;
        this.maps_wrapper_class = this.options.maps_wrapper_class;

        this.test_environment_mode(this.environment);
        this.initiate_environment();
        this.test_xmlhttprequest_availability();
        this.initiate_gmaps_lib_load(self.base_maps_api_url);
        this.initiate_data_processing();

    };

/*
    Test Environment Mode
    ~adds a modernizr test which looks wheater the cluster class is initiated in development or not
*/
Cluster.prototype.test_environment_mode = function(environment) {
    var self = this;
    return Modernizr.addTest('test_environment', function() {
        return (typeof environment !== 'undefined' && environment !== null && environment === "Development") ? true : false;
    });
};

/*
    Test XMLHTTPRequest Availability
    ~adds a modernizr test which looks wheater the xmlhttprequest class is available or not in the browser, exception makes IE
*/
Cluster.prototype.test_xmlhttprequest_availability = function() {
    return Modernizr.addTest('test_xmlhttprequest', function() {
        return (typeof window.XMLHttpRequest === 'undefined' || window.XMLHttpRequest === null) ? true : false;
    });
};

/*
    Initiate Environment
    ~depending on what the modernizr test returns it puts LESS in the development mode or not
*/
Cluster.prototype.initiate_environment = function() {
    return (Modernizr.test_environment) ? (less.env = "development", less.watch()) : true;
};

Cluster.prototype.initiate_gmaps_lib_load = function(lib_url) {
    return Modernizr.load(lib_url);
};

/*
    Initiate XHR Request
    ~prototype function that creates an xmlhttprequest for processing json data from an separate json text file
*/
Cluster.prototype.initiate_xhr_request = function(url, mime_type) {
    var request, data;
    var self = this;
    (Modernizr.test_xmlhttprequest) ? request = new ActiveXObject('Microsoft.XMLHTTP') : request = new XMLHttpRequest();        
    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200) {
            data = request.responseText;
        }
    };
    request.open("GET", url, false);
    request.overrideMimeType(mime_type);
    request.send();
    return data;
};

Cluster.prototype.initiate_google_maps_action = function() {
    var self = this;
    return $(this.maps_wrapper_class).each(function(index, element) {
        return $(element).on('click', function(ev) {

            var html = $('<div id="map-canvas" class="map-canvas"></div>');

            var latitude = $(element).attr('data-latitude');
            var longitude = $(element).attr('data-longitude');

            log("LAT : " + latitude);
            log("LON : " + longitude);

            $.lightbox(html, {
                "width": 900,
                "height": 250,
                "onOpen"  : function() {

                }
            });
            ev.preventDefault();
        });
    });
};

Cluster.prototype.initiate_data_processing = function() {
    var self = this;
    var json_data = JSON.parse(self.initiate_xhr_request(self.json_data_url, 'application/json; charset=ISO-8859-1'));
    var source_data = self.initiate_xhr_request(self.template_data_url, 'text/html');
    var template = Handlebars.compile(source_data);

    for(var i = 0; i < json_data.length; i++ ) {
        var result = template(json_data[i]);
        $(result).appendTo(self.cluser_wrapper_id); 

    }

    self.initiate_google_maps_action(); 

};

/*
    Cluster
    ~initiate the cluster class
*/
var cluster = new Cluster("Development");

});

My problem would be that I don't think I'm iterating the JSON object right or I'm using the template the wrong way because if you check this link : http://rolandgroza.com/labs/valtech/ ; you will see that there are some numbers there ( which represents latitude and longitude ) but they are all the same and if you take only a brief look at the JSON object each number is different.

So what am I doing wrong that it makes the same number repeat ? Or what should I do to fix it ? I must notice that I've just started working with templates so I have little knowledge it.