Structure of Backbone Models and Collections based on JSON

Question

I have this web app that tracks daily nutrients consumption through foods and presents them in a neat timeline.

I am new to Backbone and I am trying to structure my models and collections. How can I model the following JSON into Backbone Models/Collections?

Should it be a foods collection inside a day model?

{
      response: [
        { // a random day
          date: '1/1/2011',
          totalCalories: 1000,
          totalCarbs: 100,
          totalProtein: 60,
          totalFats: 30,
          foods: [
            { // a food consumed in this day
              datetime: '1/1/2011 17:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            },
            {
              datetime: '1/1/2011 19:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            }
          ]
        },
        { // another day
          date: '3/1/2011',
          totalCalories: 1000,
          totalCarbs: 100,
          totalProtein: 60,
          totalFats: 30,
          foods: [
            {
              datetime: '3/1/2011 17:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            },
            {
              datetime: '3/1/2011 19:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            }
          ]
        }
      ]
}

DaysCollection> Model> FoodsArray/FoodsCollection. Whether foods should be an array or backbone collection is upto your application. if you don't need to perform any backbone related operations on it, it doesn't have to be a collection. Note that backbone doesn't support nested collections or models. So you have to handle things like propagating events if you nest backbone objects. I'd leave foods as an array for simplicity — T J, Sep 11 '17 at 09:00
I wrote complete answers on the [different ways to nest models and collections](https://stackoverflow.com/a/40823148/1218980), [dealing with nested model attributes](https://stackoverflow.com/a/41701463/1218980), and [bubbling events from nested models and collections](https://stackoverflow.com/a/40532592/1218980). — Emile Bergeron, Sep 11 '17 at 13:44

score 0 · Answer 1 · edited Sep 11 '17 at 13:41

If you have JSON you can create collection and model

Creating model

var myModel = Backbone.Model.extend({});

Creating collection

var myCollection = Backbone.Collection.extend({
  model: myModel
});

var ourCollection = new myCollection(yourJSON);

In your example, I will create 2 collections (1 nested in model) CollectionOfDays -> ModelOfDay -> CollectionOfFoods (inside the model)

var randomDay = Backbone.Model.extend({});
var randomDayCollection = Backbone.Collection.extend({
  model: randomDay
});

var collection = new randomDayCollection(yourJSON);

model in collection have attributes:

date: '1/1/2011',
totalCalories: 1000,
totalCarbs: 100,
totalProtein: 60,
totalFats: 30,
foods: [Array] -food consumed in day

After that, you can create other model to one Food and Foods collection and overwrite your foods.

Structure of Backbone Models and Collections based on JSON

1 Answers1