backbone model fetch JSON element by ID

Question

I am using backbone for the first time and I am really struggling to get it to function correctly with a JSON data file.

I have a model Like so:

window.Test = Backbone.Model.extend({

defaults: {  
    id: null,
    name: null,
},

url: function() {
    return 'json/test.json/this.id';
  },

initialize: function(){  

}
});

When a test item is clicked I then try to bring up the details of the pacific model that was clicked by doing

testDetails: function (id) {


    var test = new Test();
    test.id = id;
    test.fetch({ success: function(data) { alert(JSON.stringify(data))}});
},

However this does not work, I am unable to correctly say "get the JSON element with the passed ID"

Can anyone please show me how to correctly structure the models URL to pull the element with the ID.

Thanks

score 1 · Answer 1 · edited May 23 '17 at 11:56

The problem here is that you're treating your JSON data file like a call to a server. That won't work and it's the reason you're getting a 404. If you're accessing a file locally, you have to load the file first. You can do this with jQuery using the .getJSON() method, or if the file's static, just load it into memory with a script block (though you'll probably need to assign a var in the file). Most likely, you'll use jQuery. An example of this can be found here:

Using Jquery to get JSON objects from local file.

If this is an array of JSON, you can load the array into a collection, and use the "at" method to access the particular element by id. If it's entirely JSON, you'll have to create a custom parser.

score 0 · Answer 2 · answered Jul 17 '12 at 13:38

0

your url is incorrect for one. you are returning the literal string 'this.id'. you probably want to do something more along the lines of

url: function () {
    return 'json/test.json/' + this.id;
}

answered Jul 17 '12 at 13:38

dcole2929

357
2
11

In Backbone, you use the `.get()` method to access model properties. `this.id` will return `undefined` – jackwanders Jul 17 '12 at 13:40
Hi Thanks, I have changed it now however I get the error GET http://localhost/backbone/json/test.json/2 404 (Not Found) – Ben_hawk Jul 17 '12 at 13:44
How would I tell it to get a JSON element with the ID given – Ben_hawk Jul 17 '12 at 13:46
@jackwanders this.id works fine when being referenced from within the model itself. you are correct however that using get would be the proper use from outside of the model. – dcole2929 Jul 17 '12 at 14:52

score 0 · Answer 3 · answered Jul 17 '12 at 13:39

0

I would start by fixing your url function:

url: function() {
    return 'json/test.json/' + this.get('id');
}

The way you have it now, every fetch request, regardless of the model's id, is going to /json/test.json/test.id

answered Jul 17 '12 at 13:39

jackwanders

15,612
3
40
40

Hi Thanks, I have changed it now however I get the error GET localhost/backbone/json/test.json/2 404 (Not Found) – Ben_hawk Jul 17 '12 at 13:45
In that case, there's most likely an issue with routing on your server, or your `url` is still incorrect. I can't help more without knowing more about how your backend is set up – jackwanders Jul 17 '12 at 14:25

backbone model fetch JSON element by ID

3 Answers3