how to use Backbone Collection to fetch this JSON result?

Question

I have the following JSON reply

{
   "results":[
      {
         "Product":{
            "id":"1",
            "short_name":"Infra - 2200 CAS Sma SIMO onl [DAS.1.1]",
            "serial_number":"DAS.1.1",
            "created_by":"Wesley Jace Tan",
            "modified_by":"Wesley Jace Tan",
            "created":"2013-02-11 07:58:20",
            "modified":"2013-02-11 07:58:20",
            "full_name_type":"2200",
            "full_name_cas_stk":"CAS",
            "full_name_size":"Small",
            "full_name_simo_mimo":"SIMO only",
            "full_name_product_code":"(2961-737)",
            "uom":"lot",
            "material":"Infra"
         },
         "Price":[
            {
               "id":"1",
               "product_id":"1",
               "source_file":"LTE Test File.xls",
               "for_financial_year":"FY12_13",
               "created_by":"Wesley Jace Tan",
               "modified_by":"Wesley Jace Tan",
               "created":"2013-02-11 07:58:20",
               "modified":"2013-02-11 07:58:20",
               "gross_unit":"50.00",
               "gross_total_value":"0.00",
               "gross_total_formula":"=K12*J12",
               "incentive_value":"5",
               "incentive_formula":"5",
               "net_price_unit":"0.00",
               "net_price_total_value":"0.00",
               "net_price_total_formula":"=N12*J12"
            }
         ]
      },
      {
         "Product":{
            "id":"2",
            "short_name":"Infra - 2200 CAS Sma SIMO to  [DAS.1.2]",
            "serial_number":"DAS.1.2",
            "created_by":"Wesley Jace Tan",
            "modified_by":"Wesley Jace Tan",
            "created":"2013-02-11 07:58:20",
            "modified":"2013-02-11 07:58:20",
            "full_name_type":"2200",
            "full_name_cas_stk":"CAS",
            "full_name_size":"Small",
            "full_name_simo_mimo":"SIMO to MIMO Retrofit",
            "full_name_product_code":"(2961-737)",
            "uom":"lot",
            "material":"Infra"
         },
         "Price":[
            {
               "id":"2",
               "product_id":"2",
               "source_file":"LTE Test File.xls",
               "for_financial_year":"FY12_13",
               "created_by":"Wesley Jace Tan",
               "modified_by":"Wesley Jace Tan",
               "created":"2013-02-11 07:58:20",
               "modified":"2013-02-11 07:58:20",
               "gross_unit":"11.00",
               "gross_total_value":"0.00",
               "gross_total_formula":"=K13*J13",
               "incentive_value":"24",
               "incentive_formula":"24",
               "net_price_unit":"0.00",
               "net_price_total_value":"0.00",
               "net_price_total_formula":"=N13*J13"
            }
         ]
      },
      {
         "Product":{
            "id":"3",
            "short_name":"Infra - 2200 CAS Sma Full MIM [DAS.1.3]",
            "serial_number":"DAS.1.3",
            "created_by":"Wesley Jace Tan",
            "modified_by":"Wesley Jace Tan",
            "created":"2013-02-11 07:58:20",
            "modified":"2013-02-11 07:58:20",
            "full_name_type":"2200",
            "full_name_cas_stk":"CAS",
            "full_name_size":"Small",
            "full_name_simo_mimo":"Full MIMO",
            "full_name_product_code":"(2961-737)",
            "uom":"lot",
            "material":"Infra"
         },
         "Price":[
            {
               "id":"3",
               "product_id":"3",
               "source_file":"LTE Test File.xls",
               "for_financial_year":"FY12_13",
               "created_by":"Wesley Jace Tan",
               "modified_by":"Wesley Jace Tan",
               "created":"2013-02-11 07:58:20",
               "modified":"2013-02-11 07:58:20",
               "gross_unit":"12.00",
               "gross_total_value":"0.00",
               "gross_total_formula":"=K14*J14",
               "incentive_value":"5",
               "incentive_formula":"5",
               "net_price_unit":"0.00",
               "net_price_total_value":"0.00",
               "net_price_total_formula":"=N14*J14"
            }
         ]
      }
   ]
}

The url to retrieve the above data is /products/index.json

The url to retrieve page 2 of products data is /products/index.json/page:2

I have written the following as the Collection

<script type="text/javascript">
    (function ($) {
        window.AppView = Backbone.View.extend({
            el: $("body")
        });
        var appview = new AppView;

        var Products = Backbone.Collection.extend({
            model: Product, 
            url: '/products/index.json'
        });

        Products.fetch();
    })(jQuery);
</script>

I think I have written the Products Collection wrongly.

Please advise.

UPDATE

This is my new code http://jsfiddle.net/Cw6PT/

This is the error message I now have: Uncaught TypeError: Object function (){return c.apply(this,arguments)} has no method 'fetch'

first, your JSON represantation of Product is unfortunate. Price should be a descendant to Product not a sibling in this case. And then you should use .parse method to tell Collection to take items from results array. — opengrid
– opengrid, Commented Feb 13, 2013 at 10:50

Kim Stacks · Accepted Answer · 2013-02-14 02:22:15Z

2

Your Products is a Collection class, not a Collection object. Changing your code to

new Products().fetch()

or

var Products = new (Backbone.Collection.extend(...))

should work. Besides, if you want to customize how to parse the JSON reply, you could override collection.parse.

edited Feb 14, 2013 at 2:22

Kim Stacks

10.9k39 gold badges168 silver badges302 bronze badges

answered Feb 13, 2013 at 3:46

Hui Zheng

10.2k2 gold badges37 silver badges40 bronze badges

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

5 Comments

Kim Stacks Over a year ago

THank you. I have a follow up question based on your reply. Basically it has to do with parsing the JSON reply into 2 models instead of 1. Please advise. Thank you. stackoverflow.com/q/14847498/80353

Kim Stacks Over a year ago

I understood your answer conceptually. BUt it did not work for me hence I did not accept as answer. This is my new code and my new error message is Uncaught TypeError: Object function (){return c.apply(this,arguments)} has no method 'fetch'

Hui Zheng Over a year ago

Just notice you've taken my second suggestion. Sorry I forgot parenthese around Backbone.Collection.extend(...)(already fixed in the answer). Now it should work.

Kim Stacks Over a year ago

I have accepted your code and added changes to make it easier to see. Thank you!!

Hui Zheng Over a year ago

it's my pleasure to have helped you.

Collectives™ on Stack Overflow

how to use Backbone Collection to fetch this JSON result?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related