CODEWITHSUNDEEP
javascriptjsonbackbone.jsdata-structures
jagershark
jagershark

Reputation: 1241

Backbone.js JSON Structure

I am confused on how to work with the JSON structure of an API with backbone.

I have no control over the structure of the api (it is the REST api from the wordpress plugin - woocommerce).

I have relatively little experience with Backbone and every json api, which I have always created myself has had the following structure:

[
    {
        "id": "1",
        "name": "John",
        "email": "[email protected]",
        "order_number": "#3473388"
    },
    {
        "id": "2",
        "name": "Jane Doe",
        "email": "[email protected]",
        "order_number": "#8877632"
    }
]

An array of objects, nice and simple!

However, the structure of the api I am working with now has the following stucture:

{
    "orders": [
        {
            "id": 130259,
            "name": "John Doe",
            "email": "[email protected]",
            "order_number": "#3473388"
        },
        {
            "id": 130259,
            "name": "Jane Doe",
            "email": "[email protected]",
            "order_number": "#3473388"
        }
    ]
}

This is my model for an order:

App.Models.Order = Backbone.Model.extend({

    defaults: {
        id: '',
        name: '',
        email: '',
        order_number: ''
    }

});

And this is my collection of orders:

App.Collections.Orders = Backbone.Collection.extend({

    model: App.Models.Order,

    url: 'http://api.example.com/orders'

});

The structure of my model/collection does not map well with the api, and when fetching my collection, the data is returned, but doesn't fit. How do I work with backbone to accomadate this json structure?

UPDATE

Overriding the parse method on the collection (thanks to Yura) like so returns the data:

App.Collections.Orders = Backbone.Collection.extend({

    model: App.Models.Order,

    url: 'http://api.example.com/orders',

    parse: function( resp ){
        return resp.orders;
    }

});

The data returned is multidimensional like so:

[
    {
        "id": 130285,
        "order_number": "#130285",
        "billing_address": {
            "first_name": "John",
            "last_name": "Doe",
            "company": "",
            "address_1": "13 Green Willow",
            "address_2": "",
            "city": "Celbridge",
            "state": "Kildare",
            "postcode": "",
            "country": "IE",
            "email": "[email protected]",
            "phone": "87384348043"
        }
    }
]

In the parse method, how do I map multidimensional json to my collection's models?

Upvotes: 1

Views: 842

Answers (1)

Yura
Yura

Reputation: 2721

Since your API returns an array of objects that can be used to initialize models, you can use parse on your collection, like so:

App.Collections.Orders = Backbone.Collection.extend({

    model: App.Models.Order,

    url: 'http://api.example.com/orders',

    parse: function( resp ){
        return resp.orders;
    }

});

If your API returned plain array of objects, you wouldn't need parse.
Documentation for Collection.parse: http://backbonejs.org/#Collection-parse

Update

If you need to parse individual objects to model keys, you can add parse method on your model and return the object where keys will be the keys of your models and values passed from your response.

I have created a jsfiddle for demonstration: http://jsfiddle.net/yuraji/x62jje39/

Upvotes: 2

Related Questions