Question

22

Mapping JSON to backbone.js collections

rated 0 times [ 23] [ 1] / answers: 1 / hits: 16573 / 11 Years ago, fri, july 26, 2013, 12:00:00

Alright, it looks like I need a hint to point me in the right direction. This question is two part - working with mult-dimensional JSON and Collections of Collections from JSON.

Background

I have some JSON that is going to be retrieved from a server and have control over how it could be formatted.

Multi-Dimentional JSON

I'm having some trouble being able connecting the model to the parts in the JSON. Say I wanted to render just each of the posts author name, and the content of status in the sample JSON below. I'm having no problem getting the status into the model, but the author name I'm a bit confused how to get to it. From my understanding I have to override the parse.

Is this bad standards / is there a better JSON structure I should use? Would it be better to keep it as flat as possible? That is move the author name and photo up one level?

I was reading How to build a Collection/Model from nested JSON with Backbone.js but it is still a little unclear to me.

Collection in Collections

Is there a nice way to make a collection within a collection for backbone.js? I will have a collection of posts, and then would have a collection of comments on that post. As I'm developing in backbone is that even possible?

From what I understand in Backbone.js Collection of Collections and Backbone.js Collection of Collections Issue, it would look something like this?

var Comments = Backbone.Model.extend({

    defaults : {

      _id : ,

      text : ,

      author : 

    }

})



var CommentsCollection = Backbone.Collection.extend({ model : Comments })



var Posts = Backbone.Model.extend({

    defaults : {

        _id : ,

        author : ,

        status : ,

        comments : new CommentsCollection

    }

})



var PostsCollection = Backbone.Collection.extend({ model : Posts })

Sample JSON

{

posts : [

    {

        _id: 50f5f5d4014e045f000002,

        author: {

            name : Chris Crawford,

            photo : http://example.com/photo.jpg

        },

        status: This is a sample message.,

        comments: [

                {

                    _id: 5160eacbe4b020ec56a46844,

                    text: This is the content of the comment.,

                    author: Bob Hope

                },

                {

                    _id: 5160eacbe4b020ec56a46845,

                    text: This is the content of the comment.,

                    author: Bob Hope

                },

                {

                ...

                }

        ]

    },

    {

        _id: 50f5f5d4014e045f000003,

        author: {

            name : Chris Crawford,

            photo : http://example.com/photo.jpg

        },

        status: This is another sample message.,

        comments: [

                {

                    _id: 5160eacbe4b020ec56a46846,

                    text: This is the content of the comment.,

                    author: Bob Hope

                },

                {

                    _id: 5160eacbe4b020ec56a46847,

                    text: This is the content of the comment.,

                    author: Bob Hope

                },

                {

                ...

                }

        ]

    },

    {

    ...

    }

]}

I appreciate even any hints to guild me. Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dallasb

Add To Favorites

Follow

Total Points: 657

Total Questions: 98

Total Answers: 97

Location: Luxembourg

Member since Tue, Jan 25, 2022

2 Years ago

answered 11 Years ago tyemathewj · Accepted Answer

Update, I found a SuperModel for backbone which provides relationships between models and between collections. It has proved to be a great solution for Collections within Collections as well as Deep Nested Model data.

Models are pre-defined with their relationships to other models via key. During the initialize/parse of the model any values in the JSON at that key gets passed off to a new related model or collection. A relationship is created between the two models/collections.

This means with the above example we can do something like this with our models:

Setup

var Author = Supermodel.Model.extend({});

var Post = Supermodel.Model.extend({});

var Comment = Supermodel.Model.extend({});



var Posts = Backbone.Collection.extend({

  model: function(attrs, options) {

    return Post.create(attrs, options);

  }

});

var Comments = Backbone.Collection.extend({

  model: function(attrs, options) {

    return Comment.create(attrs, options);

  }

});



Post.has().one('author', {

  model: Author,

  inverse: 'post'

}).many('comments', {

  collection: Comments,

  inverse: 'post'

});



//reverse relationships could also be setup

Usage

var posts = new Posts( postsObject ); //where postsObject is an array of posts



//With SuperModel, we are able to navigate the related models

posts.first().comments();

posts.first().comments().author();

posts.last().author();

Fiddle

Working Example in JSFiddle