javascriptjqueryjsonbackbone.js

Backbone.js - How I can get values from collection?


I am using jquery, backbonejs and underscorejs for my project. My question is, how I can get values from the collection given?

BranchModel

define([
  'underscore',
  'backbone'
], function(_, Backbone) {

  var BranchModel = Backbone.Model.extend({});

  return BranchModel;

});

BranchCollection

define([
  'jquery',
  'underscore',
  'backbone',
  'models/branch/BranchModel'
], function($, _, Backbone, BranchModel){
  var BranchCollection = Backbone.Collection.extend({
    model: BranchModel,
    url: "data.json",
        parse: function(data) {
            return data;
        }
  });

  return BranchCollection;
});

BranchView

define(['jquery', 'underscore', 'backbone', 'collections/branch/BranchCollection', 'text!templates/locate-us/mapTemplate.html'], function($, _, Backbone, BranchCollection, mapTemplate) {
    var MapView = Backbone.View.extend({
        el: $("#page"),
        initialize: function() {
            this.$el.off();
        },
        render: function(id) {
            var that = this;
            this.collection = new BranchCollection();
            var formValues = {
                id: id
            };
            this.collection.fetch({
                data: formValues,
                success: function(collection, response) {
                    that.$el.html(mapTemplate);
                },
                error: function() {
                    console.log("error");
                }
            });
        },
    });
    return MapView;
});

data.json

[
    {
      "id": "1",
      "name": "KCP KEBAYORAN LAMA, FMT-JKT",
      "address":"Jl. Raya Kebayoran Lama No. 22 (PAL VII), Kel. Sukabumi Utara - Kec. Kebon Jeruk, Jakarta Barat 11540",
      "latitude":"-6.1773997",
      "longitude":"106.8409396"
    },
    {
      "id": "2",
      "name": "KK JL. PANJANG, PDI-JKT",
      "address":"Jl. Panjang No 37 D, RT 006, RW 011, Kecamatan Kebon Jeruk, Kelurahan Kebon Jeruk, Jakarta Barat",
      "latitude":"-6.1632894",
      "longitude":"106.7633571"
    }
]

Let say, i want to retrieve record id no 1, so I will get this values.

              "id": "1",
          "name": "KCP KEBAYORAN LAMA, FMT-JKT",
          "address":"Jl. Raya Kebayoran Lama No. 22 (PAL VII), Kel. Sukabumi Utara - Kec. Kebon Jeruk, Jakarta Barat 11540",
          "latitude":"-6.1773997",
          "longitude":"106.8409396"

Thanks a lot in advance.


Solution

  • It seems that you need to fetch models by id, for this you need to provide a urlRoot in your model. For example :

    var BranchModel = Backbone.Model.extend({
     urlRoot : '/branch'
    });
    

    This means that you have to have a urls for branch resource in your Rest API

    /branch        // returns all branches
    /branch/:id    // returns a single branch that has this id
    

    And now you can start fetching the model by id as following

    var model = new BranchModel({id:someId});
    model.fetch();
    

    Hope this was helpful.