Backbone.js shift Collection

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>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
            type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        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>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
            type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        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"
}]

Suggest improvement

Backbone.js unshift Collection

Share your thoughts in the comments