Using AJAX in Node js and displaying data using Handlebars

Question

I am using AJAX and Handlebars to get data from my MongoDB without refreshing the page and represent it in an easier manner.

I have created a div with a search button where a user places his/her inputs. These inputs need to passed to my routes and then the results from my DB should be sent back from my routes, to the handlebar which will help me display the products.

index.hbs

<div id="search-form">
....
                <input id="bhkInput" name="bmin" type="number">
                <input id="priceMin" name="pf" type="number">
                <input id="priceMax" name="pt" type="number">
               <input type="submit" class="btn searchButton" id="submit" value="Search" onclick="showResults()">
</div>

<div class="row col-sm-12 searchResults" id="sr">
//Results need to be displayed here
</div>


<script id = "result-template" type="text/x-handlebars-template">
        {{#each searchResults }}
            <div class="row">
                {{#each this }}
                    <div class="col-sm-6 col-md-4">
                       ...
                            <img src="{{this.imagePath}}" alt="..." class=" card-img-top">
                            <div class="card-body">
                                <h4>Flat No: {{this.flatNo}}</h4>
                                ...
                                <p class="description">
                                    {{this.description}}
                                </p>
                                ...
                                ...
                                </div>
                            </div>
                        </div>
                    </div>
                {{/each}}
            </div>
        {{/each}}
    </script>
<script>
     function showResults(){
        let bmin = document.getElementById('bhkInput').value;
        let pf = document.getElementById('priceMin').value;
        let pt = document.getElementById('priceMax').value;
        $.ajax({
            type: 'GET',
            data: {
                bmin: bmin,
                pf: pf,
                pt: pt
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: "/results",
            success: function(data){
                let source = $('#result-template').html();
                let template = Handlebars.compile(source);
                let html = template(data);
                $(".searchResults").innerHTML = html;
            }

        });
}

The issue that I am facing:

When I send back the results from my DB, I am unable to display it using Handlebars. How do I handle the data after success function is called. I want the results to be appended in the 'searchResults' div. I went through this link, however I am yet not able to see the data of my results.

Update

I took dummy data from the Handlebars Docs and used it for my template and yet there is no data being appended in the html The console.log(html) returns the template without the new data items

index.hbs

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>
</script>
<script>
....
 $.ajax({
           ....
            success: function(data){
 var source   = document.getElementById("entry-template").innerHTML;
                var template = Handlebars.compile(source);
                var context = {title: "My New Post", body: "This is my first post!"};
                var html    = template(context);
                console.log(html); 
....
</script>

Output for console.log(html)

  <div class="entry">
        <h1></h1>
        <div class="body">

        </div>
    </div>

DarknessZX · Accepted Answer · 2018-08-10 09:28:50Z

1

For the first issue. Your method is GET so I think you can get it by req.query.productId.

For the second issue. You should append your data in ajax success callback function, because ajax is asynchronous. For example:

$.ajax({
       type: 'GET',
       data: encodeURIComponent(searchObject),
       url: "/results",
       success: function(data){
             console.log(data);
             let sr = document.getElementById('sr');
             $(sr).append();
       }
});

How to get "data" from JQuery Ajax requests

answered Aug 10, 2018 at 9:28

DarknessZX

6863 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

rut_0_1 Over a year ago

How do I access the different parameters of the searchResults without using handlebars and append it the way you have shown

rut_0_1 Over a year ago

Also please check the update. The req.query.productId however it is not working

DarknessZX Over a year ago

@rut_0_1 can you console.log(req.query)

rut_0_1 Over a year ago

{ 'object Object': '' } is the Output of console.log(req.query)

DarknessZX Over a year ago

@rut_0_1 In your ajax call you don't need to encodeURIComponent, just data: searchObject. jQuery will do encode work for you.

|

Collectives™ on Stack Overflow

Using AJAX in Node js and displaying data using Handlebars

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related