How to build a Collection/Model from nested JSON with Backbone.js

Question

I'm relativly new to Backbone.js

I have a JSON like the picture shows ! I saw some Answers in relation with Backbone-relational, but still dont get the point!

How can i convert this JSON to Backbone.js Collections/Models??

I update with a code but it dont work like expected! i can't see an model when i do :

My Structure is :

[0] : is a collection of models

[clefs] + ... + [Rest] : are collection of models

(clefs) => [0] + ... + [9] : are Models(title contains a string, path too)

Thanks a lot!!

EDIT(10.01.12) :

My Solution :

window.initModel = Backbone.Model.extend({
  defaults: {
    "title": "",
    "path": ""
  }
});
window.CustomCollection = Backbone.Collection.extend({
  model: initModel
});
window.Init = Backbone.Model.extend({
  url : function(){
    return  "/api/data.json"      
  },

  parse: function(response) {

    clefs = new CustomCollection();
    clefs.add(response.clefs);        
    this.set({clefs: clefs});

    .....

    rests = new CustomCollection();
    rests.add(response.rests);        
    this.set({rests: rests});
} 
});

this helped me out too!

Croup

Are you looking to have nested Backbone models/collections as well (this isn't 100% necessary, depending on your requirements). You may be able to get by with just a single Backbone model, with a single object. – Dorri

@trouble After having a go with Backbone-Relational I've gone with your solution (overriding parse). With Backbone-Relational certain events 'add' etc weren't firing and were causing problems. Thanks for posting! – Joktan

Answer 1

I'm at work, so I cannot give you a fully coded answer, but the gist is, you can do the following in your top level models to achieve a nested model hierarchy:

var AmericasNextTopModel = Backbone.Models.extend({
    initialize: function(){

        this.set({
             clefs: new ClefCollection(this.get('clefs')),
             accidentals: new AccidentalCollection(this.get('accidentals')),
             notes: new NoteCollection(this.get('notes')),
             rests: new RestCollection(this.get('rests'))
        });
    }
});

I do not use backbone-relational so I cannot give you an answer regarding that.

Are you making an online sheet music viewer/editor? :D Cool I'd love to see it when you're done.

Dorri

Yes i do :D!! i'll tell u when im done! i make an Update in my post about ur answer! – Croup

Answer 2

The reset method (see 'reset') allows you to pass a JSON array to a collection. This is the equivalent of a PUT method, replacing the specified collection with the JSON hash.

You can also use the add method to add to an existing collection, or pass the JSON hash into the constructor as you create a new collection.

You'll have to do some basic cleaning up of your array to get it in an appropriate format, and then convert it to JSON

Schnitzler

huh! I see your points! but this really dont help me construct true Collection of clefs, ..., rest isn't? I really need to have it so like i descripte it! just correct me if im wrong! Thank you! – Croup

My Bad! the picture above is a JSON! sorry – Croup

Answer 3

I'm using PHP to grab a feed as JSON since it's on a different domain. I save those results to a JS variable, and then I just had success using this to get it into my Backbone collection...

var feedCollection = new Backbone.Collection();
feedCollection.set(myFeedJSON.nestedObject.nestedArrayIWant);

Quixotic