Backbone.js slice Collection

Last Updated : 13 Jun, 2022

In this article, we will discuss the Backbone.js slice collection. The Backbone.js slice collection is used to select the elements from a model or an array of models from the given collection.

Syntax:

collection.slice(start,end)

Parameters: It will take two parameters.

start is used to specify the index position of an starting element to be selected in an array
end is used to specify the index position of an ending element to be selected in an array

Using the CDN Link: A content delivery network is a network that serves files to users. Here are the CDNs for Backbone.js

<script src=”https://code.jquery.com/jquery-2.1.3.min.js” type=”text/javascript”></script> <script src=”http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js” type=”text/javascript”></script> <script src=”http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js” type=”text/javascript”></script>

Example 1: In this example, we are creating a collection with 6 elements and selecting from the first index to the fourth index.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Example of Backbone.js</title>
    <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
        });
 
        // 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"
        });
        var food3 = new Food({
            name: "milk",
            country: "patna"
        });
        var food4 = new Food({
            name: "sugar/chocos",
            country: "delhi"
        });
        var food5 = new Food({
            name: "onions",
            country: "Hyderabad"
        });
        var food6 = new Food({
            name: "sweets",
            country: "delhi"
        });
 
        // The add() method adds the models food1, food2,
        // food3, food4, food5, food6 to the collection 
        // instance 'final'  
        var final = new FoodCollection();
        final.add([food1, food2, food3, food4, food5, food6]);
 
        // Select from 0 to 4 th index
        var final1 = final.slice(0, 4);
        document.write(JSON.stringify(final1))
    </script>
</head>
 
<body></body>
 
</html>

Output:

[
   { "name": "Icecream", "country": "Hyderabad", "food_region": "India" },
   { "name": "cake/chocos", "country": "Guntur", "food_region": "India" },
   { "name": "milk", "country": "patna", "food_region": "India" },
   { "name": "sugar/chocos", "country": "delhi", "food_region": "India" }
]

Example 2: In this example, we are creating a collection with 6 elements and selecting from the 2nd index to the 5th index.

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
        });
 
        // 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"
        });
        var food3 = new Food({
            name: "milk",
            country: "patna"
        });
        var food4 = new Food({
            name: "sugar/chocos",
            country: "delhi"
        });
        var food5 = new Food({
            name: "onions",
            country: "Hyderabad"
        });
        var food6 = new Food({
            name: "sweets",
            country: "delhi"
        });
 
        // The add() method adds the models food1,
        // food2, food3, food4, food5, food6 to the
        // collection instance 'final'  
        var final = new FoodCollection();
        final.add([food1, food2, food3, food4, food5, food6]);
 
        // Select from 2 to 5 th index
        var final1 = final.slice(2, 5);
        document.write(JSON.stringify(final1))       
    </script>
</head>
 
<body></body>
 
</html>

Output:

[
   { "name": "milk", "country": "patna", "food_region": "India" },
   { "name": "sugar/chocos", "country": "delhi", "food_region": "India" },
   { "name": "onions", "country": "Hyderabad", "food_region": "India" }
]

Reference: https://backbonejs.org/#Collection-slice

Suggest improvement

Backbone.js parse Collection

Share your thoughts in the comments