Backbone.js: I am using web service call to get collection object using Backbone.js, How to display the collection response object data in html?

Question

I am using web service call in a Backbone.js script to get the collection objects response in console using following code:

<script>
$(document).ready(function(){

var pgServerName =$("#serverName").text();
var pgPort =$("#serverPort").text();
var pgProjectName =$("#projectName").text();
var userLogged =$("#loggedInUser").text();

$("button").on('click', function(){

     Server=Backbone.Model.extend({});

     ServerList= Backbone.Collection.extend(
        {
            model:Server,
            url:"/MicroStrategy/servlet/taskProc?taskId=getAllUserDecks&taskEnv=xhr&taskContentType=json&iServer="+pgServerName+"&port="+pgPort+"&userId="+userLogged+"&authMode=64&projName="+pgProjectName,
            initialize:function(){
            alert('In collection init');
            }
        }
);

    list=new ServerList;
    list.fetch({
    success:function(collection, response)
    {
        alert(response);
        console.log(response);
    },

    error:function(){alert("error");}
});
});

});

I got the following response in my console:

 "deckIds": Array[3] [
    0 Object {
      "port": "30170",
      "deckName": "Interactive Sandbox",
      "projName": "CFO Sandbox",
      "createdDateTime": "3/5/2015 11:39:36 AM",
      "deckId": "12",

    },
    Object 1 {
      "port": "30170",
      "deckName": "Standard Management Reporting",
      "projName": "Standard Management Reporting",
      "createdDateTime": "2/18/2015 8:15:14 AM",
      "deckId": "1",

    },
    Object 2{
      "port": "30170",
      "deckName": "Month End Tracking Reports",
      "projName": "Standard Management Reporting",
      "createdDateTime": "2/12/2015 7:24:01 AM",
      "deckId": "3",

    },

Now I want to display the deckId, createdDateTime, deckName in html format in the below code:

<table id="example">
                        <thead>
                            <tr>

                                <th>deckId</th>
                                <th>deckName</th>
                                <th>createdDateTime</th>                                            


                            </tr>
                        </thead>

                        <tbody>


                            <tr>                            

                                <td>actual data from deckId</td>
                                <td>actual data from deckName</td>
                                <td>actual data from createdDateTime </td>                          


                            </tr>

                        </tbody>
</table>

How do I display the response I got in console on html page ? Please help.

Do you need the exact backbone code or you need to know how it is to be done? — Kushal, Apr 14 '15 at 12:15
I need the code which I can append in the existing backbone script code and call that in html. Exact code or any reference will also do. — Kartik Rao, Apr 14 '15 at 12:56
There are multiple ways. the first and my least favorite is to use jQuery to loop through the objects and appending the data into the html (using `append`). Other and more elegant (in my opinion) would be using a template engine such as `Mustache.js` or `handlebars.js` which provide a very nice ways of displaying data...please Google for more info :) — MorKadosh, Apr 14 '15 at 15:10
@KartikRao, Hi can you provide me with the code for doing this call ? I have the same issue but I dont know how to do it, Thanks — Ussopokingo, Apr 14 '20 at 07:54

score 0 · Answer 1 · edited May 23 '17 at 12:08

As for what i am understanding you are new to Backbone.js so i would request you go through some tutorials rather than just getting the code made up by some other person and just add that piece of code to your existing one.

So here are the links: Backbone.js tutorials and learning resources

If you have any doubts i will be more than glad to help you out in that case. Hope you will follow my heed and learn instead of copy.

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

As you are using Backbone , you can just use underscore template engine because it's a dependency of Backbone. You can read more about it here -> How to use underscore.js as a template engine?

edited May 23 '17 at 12:30

Community

1
1

answered Apr 15 '15 at 14:53

Motikant

11
3

Backbone.js: I am using web service call to get collection object using Backbone.js, How to display the collection response object data in html?

2 Answers2