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
– Daryl Teo, Commented Jan 9, 2012 at 0: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
– greenimpala, Commented Feb 1, 2012 at 12:32

hughdbrown · Accepted Answer · 2012-10-22 01:57:58Z

18

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.

edited Oct 22, 2012 at 1:57

hughdbrown

49.2k20 gold badges89 silver badges111 bronze badges

answered Jan 9, 2012 at 0:15

Daryl Teo

5,5251 gold badge34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

3logy Over a year ago

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

Community · Accepted Answer · 2017-05-23 11:53:21Z

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, 2017 at 11:53

CommunityBot

11 silver badge

answered Jan 9, 2012 at 0:14

djlumley

2,9852 gold badges26 silver badges30 bronze badges

2 Comments

3logy Over a year ago

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 Over a year ago

My Bad! the picture above is a JSON! sorry

webninjataylor · Accepted Answer · 2013-10-14 19:43:11Z

0

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

answered Oct 14, 2013 at 19:43

webninjataylor

711 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related