Skip to content
Related Articles

Related Articles

Backbone.js shift Collection

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

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
Related Articles

Start Your Coding Journey Now!