Skip to content
Related Articles

Related Articles

Backbone.js shift Collection

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Jun, 2022

In this article, we will discuss Backbone.js shift collection. The Backbone.js pop collection is used to remove and return the first model from the given collection. 

Syntax:

collection.pop(models, options)

Parameters: It will take one parameter.

  • options: This parameter takes the model type which will be removed from the given collection.

Example 1: In this example, we will create a model Food and apply shift().

HTML




<!DOCTYPE html>
<html>
 
<head>
            type="text/javascript"></script>
    <script src=
            type="text/javascript"></script>
    <script src=
        type="text/javascript"></script>
    <script type="text/javascript"
         // 'Food' is a model and that contains the
         // default value for the  model 
         var Food = Backbone.Model.extend({ 
            defaults: { 
               food_name: "Butter", 
               food_region:"Hyderabad" 
            
         }); 
   
         // Here the  'FoodCollection' is a collection instance and
         // model 'Food' is specified by overriding the 'model' property 
         var FoodCollection = Backbone.Collection.extend({ 
            model: Food 
         }); 
   
         // The instances "food1" and "food2" are
         // created for the model "Food" 
         var food1 = new Food({name: "Icecream", 
                               country:"Hyderabad"}); 
         var food2 = new Food({name: "cake/chocos", 
                               country:"Guntur"}); 
   
         // The add() method adds the models 'food1' and 'food2'
         // to the collection instance 'final' 
         var final = new FoodCollection(); 
         final.add([food1,food2]); 
   
         // Get the count of total food using length 
         document.write("Actual Values:",
                         JSON.stringify(final.toJSON())); 
         document.write("<br>"); 
         document.write("<br>");
   
         // Apply shift() method
         final.shift();
          
         document.write('Values after Shift : ' +
                        JSON.stringify(final.toJSON())); 
      </script
</head>
 
<body></body>
 
</html>


Output:

Actual Values:[{
    "name":"Icecream",
    "country":"Hyderabad",
    "food_name":"Butter",
    "food_region":"Hyderabad"
},
{
    "name":"cake/chocos",
    "country":"Guntur",
    "food_name":"Butter",
    "food_region":"Hyderabad"
}]

Values after Shift : [{
    "name":"cake/chocos",
    "country":"Guntur",
    "food_name":"Butter",
    "food_region":"Hyderabad"
}]

Example 2: In this example, we will create a model Food and apply shift().

HTML




<!DOCTYPE html>
<html>
 
<head>
            type="text/javascript"></script>
    <script src=
            type="text/javascript"></script>
    <script src=
        type="text/javascript"></script>
    <script type="text/javascript"
         // 'Food' is a model and that contains the
         // default value for the  model 
         var Food = Backbone.Model.extend({ 
            defaults: { 
                 
               food_region:"india" 
            
         }); 
   
         // Here the  'FoodCollection' is a collection instance and
         // model 'Food' is specified by overriding the 'model' property 
         var FoodCollection = Backbone.Collection.extend({ 
            model: Food 
         }); 
          
         var food1 = new Food({name: "Icecream", 
                               country:"Hyderabad"}); 
         var food2 = new Food({name: "cake/chocos", 
                               country:"Guntur"}); 
         var food3 = new Food({name: "eggs", 
                               country:"delhi"}); 
         var food4 = new Food({name: "chicken", 
                               country:"patna"});
   
         // The add() method adds the models 'food1' and 'food2'
         // to the collection instance 'final' 
         var final = new FoodCollection(); 
         final.add([food1,food2,food3,food4]); 
   
          // Get the count of total food using length 
          document.write("Actual Values:",
                         JSON.stringify(final.toJSON())); 
         document.write("<br>"); 
         document.write("<br>");
   
         // Apply shift() method
         final.shift();
          
         document.write('Values after Shift : ' +
                        JSON.stringify(final.toJSON())); 
      </script
</head>
 
<body></body>
 
</html>


Output:

Actual Values:[{
    "name":"Icecream",
    "country":"Hyderabad",
    "food_region":"india"
},
{
    "name":"cake/chocos",
    "country":"Guntur",
    "food_region":"india"
},
{
    "name":"eggs",
    "country":"delhi",
    "food_region":"india"
},
{
    "name":"chicken",
    "country":"patna",
    "food_region":"india"
}]

Values after Shift : [{
    "name":"cake/chocos",
    "country":"Guntur",
    "food_region":"india"
},
{
    "name":"eggs",
    "country":"delhi",
    "food_region":"india"
},
{
    "name":"chicken",
    "country":"patna",
    "food_region":"india"
}]

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!