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.

Answer 1

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.