How to pass JSON from model to view and display the JSON as table in backbone js?

Question

i have a method "getSegmentGroup" in my MODEL to create a json with limited fields from data feteched through fetch(which has all records and fields).

My model method looks like the following

  getSegmentGroups: function(customerIds, column1Name, column2Name){
              var segmentTableJson = [];
              this.getSegment = new CustomerCollection();
                this.getSegment.fetch({
                    success: function(response) {
                        var fetchData = response.toJSON();
                        for(var i in customerIds){
                            customerId = customerIds[i];
                            for(var j in fetchData){
                                if(fetchData[j].custId == customerId){
                                    column_1 = fetchData[j][column1Name];
                                    column_2 = fetchData[j][column2Name];

                                }else{
                                    continue;
                                }
                            }
                            var item = { 
                                "customerId" : customerId,
                                "column1"  : column_1,
                                "column2"  : column_2
                            };
                            segmentTableJson.push(item);
                        }
                        console.log(JSON.stringify(segmentTableJson));
                        var jsonTableFormat = JSON.stringify(segmentTableJson);
                    }
                });
          }

the input customerIds is an array of ids like the following

    [7, 8]

Resulting JSON is

    [{"customerId":7,"column1":"raju.allen1888@gmail.com","column2":24},{"customerId":8,"column1":"raju","column2":34}]

Now i need to pass the json "jsonTableFormat" from the model to view to display the json in table.

how do i pass to a segment_table_view to display a table

    var segment_table_view = Backbone.View.extend({
el: $('#segment'),
initialize: function() {
    this.model.bind("add", this.render, this);
},

//this creates new rows in the table for each model in the collection
render: function() {
    _.each(this.model.models, function(data) {
        this.$el.append(new segment_view({
            model: data
        }).render().el);
    }, this);
    return this;
}
});

         //a (row) view to render each employee
var segment_view = Backbone.View.extend({
tagName: "tr",
template: _.template($("#segment-table").html()),

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}
});

Since i'm new to backbone i couldn't figure it out.

score 0 · Answer 1 · answered Jun 10 '13 at 09:24

0

I don't think you need to do all that work. You simply need to fetch the collection, once the fetch is complete render the views and use a template to decide what to show or not. No need to edit the model. Have a look at the Tips and Tricks section and read about template variables. That site has some great, short articles to get started. If you're looking to create a more 'complete' app with some modules, etc, have a look at this page.

answered Jun 10 '13 at 09:24

Xerri

4,916
6
45
54

I'm doing some modification in the json response, because i want to split the single json(based on customerId array i'm passing) and display them into number of tables. – Raju.allen Jun 10 '13 at 09:31
If you're just filtering, then it might be best to let you REST API filter it so you only get the 2 models you need but it seems that the entire collection is being used, just in separate tables. If that is the case, you can create that logic in the template with underscore. I'd avoid editing the collection itself for the sake of good practice. – Xerri Jun 10 '13 at 09:39
Ya you are wright, since i'm new to backbone js i'm just trying out these things. so that i can see some output on the screen. – Raju.allen Jun 10 '13 at 09:47
If you have no particular deliverable that you need to create I suggest you have a look at a couple of tutorials. Looking at other peoples' code will teach you a lot at this stage but remember that backbone is very flexible so there is not a lot of right or wrong, just good practice. – Xerri Jun 10 '13 at 09:54
Thanks thearchitect, i like to take your advice and trying to do all the database operations in REST API, meanwhile i passed the json to a user defined function in the view, now how do i use that json to display as table in the view. it would be helpful if you provide me a link. – Raju.allen Jun 10 '13 at 10:24
i also have a doubt, fetch() by default fetch me all the rows(call the method to fetch all rows in REST API). how do i make a call to user defined method from backbone model. – Raju.allen Jun 10 '13 at 10:26
You should pass the collection to a view. The view should generate the general structure of a table including headers and, most importantly, . This view should then loop through the collection and create child views for each model in the collection. The child views should be rows that are appended to . Fetch accepts options that are passed to $.ajax. You can do .fetch({data: {filter: "7,8"}}). That should create a request that has a GET parameter called filter with the numbers 7 and 8 to tell the API to only return customers 7 and 8. Them implement that logic in the REST API. – Xerri Jun 10 '13 at 10:34
is there a js plugin for rendering the above JSON into a table view(grid view). – Raju.allen Jun 11 '13 at 06:31
1

you cant try things like backgrid or recline.js – Xerri Jun 11 '13 at 08:54

How to pass JSON from model to view and display the JSON as table in backbone js?

1 Answers1