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!

Nested Array

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. — Daryl Teo, Jan 09 '12 at 00:10
@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! — greenimpala, Feb 01 '12 at 12:32

score 18 · Accepted Answer · edited Oct 22 '12 at 01:57

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.

Yes i do :D!! i'll tell u when im done! i make an Update in my post about ur answer! — 3logy, Jan 09 '12 at 08:26

score 0 · Answer 2 · answered Oct 14 '13 at 19:43

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);

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

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

edited May 23 '17 at 11:53

Community

1
1

answered Jan 09 '12 at 00:14

djlumley

2,955
2
24
30

1

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! – 3logy Jan 09 '12 at 07:38
My Bad! the picture above is a JSON! sorry – 3logy Jan 09 '12 at 09:17

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

3 Answers3

Linked