Backbone.js pluck Collection

Last Updated : 26 Jul, 2022

The Backbone.js pluck Collection is used to Pluck an attribute from each model in the collection. This method is equivalent to the map function and returns a single attribute value from each model. This method takes the attribute name as a parameter that has to get from the model.

Syntax:

collection.pluck( attr );

Parameter:

attr: It is the attribute name of the model which has to retrieve from the model.

Example 1: In this example, we will illustrate the Backbone.js pluck Collection. Here we will pluck the title attribute of each Model.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS pluck collection</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.2.2/backbone-min.js"
        type="text/javascript"></script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS pluck collection</h3> 
      
    <script type="text/javascript"> 
        var Book = Backbone.Model.extend(); 
  
        var books = Backbone.Collection.extend({ 
            model: Book, 
        }); 
  
        var Library = new books(); 
  
        var b1 = new Book({  
            title: "Ram",  
            Author: "Amish Tripathi",  
            vol: 1  
        }); 
          
        var b2 = new Book({  
            title: "Lolita",  
            Author: "Vladimir Nabokov",  
            vow: 2  
        }); 
          
        Library.add(b1); 
        Library.add(b2); 
  
        var temp = Library.pluck("title"); 
  
        document.write("Title of Books are : <br> "); 
        for (let x of temp) document.write(`${x}, <br>`); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js pluck Collection

Example 2: In this example, we will pluck all the attributes of the Model and see the value of the attributes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS pluck collection</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.2.2/backbone-min.js"
        type="text/javascript"></script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS pluck collection</h3> 
      
    <script type="text/javascript"> 
        var Book = Backbone.Model.extend(); 
  
        var books = Backbone.Collection.extend({ 
            model: Book, 
        }); 
  
        var Library = new books(); 
  
        var b1 = new Book({  
            title: "Ram",  
            Author: "Amish Tripathi",  
            vol: 1  
        }); 
          
        var b2 = new Book({  
            title: "Lolita",  
            Author: "Vladimir Nabokov",  
            vol: 2  
        }); 
          
        var b3 = new Book({  
            title: "The Palace of Illusion",  
            Author: "Chitra Banerjee",  
            vol: 1  
        }); 
          
        var b4 = new Book({  
            title: "Wings of Fire",  
            Author: "A. P. J. Abdul kalam",  
            vol: 1  
        }); 
  
        Library.add(b1); 
        Library.add(b2); 
        Library.add(b3); 
        Library.add(b4); 
  
        var temp = Library.pluck("title"); 
        var temp1 = Library.pluck("Author"); 
        var temp2 = Library.pluck("vol"); 
  
        document.write("Details of Books are : <br> "); 
        for (let x = 0; x < temp.length; x++)  
            document.write(`${temp[x]} volume ${temp2[x]}  
                is write by ${temp1[x]},<br>`); 
    </script> 
</body> 
  
</html>