Backbone.js fetch Collection

Last Updated : 26 Jul, 2022

The Backbone.js fetch Collection is used to fetch the set of models from the server for collection. When the models are returned models are merged with the existing models. If we want to reset all the models and form fill new models we use { reset: true } option of this method which resets the collection.

Syntax:

collection.fetch( options );

Parameters:

options: This option hash takes success and error callbacks which will be in case of status of response from the server.

Example 1: In this example, we will illustrate the Backbone.js fetch Collection. Here we will use the fetch() method and which will call the sync method of the collection which will print the models of the collection.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <title>BackboneJS fetch Router</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> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS fetch Router</h3> 
  
    <script type="text/javascript"> 
        var Book = Backbone.Model.extend(); 
  
        var b1 = {  
            title: "Ram",  
            Author: "Amish Tripathi",  
            vol: 1  
        }; 
          
        var b2 = {  
            title: "Lolita",  
            Author: "Vladimir Nabokov",  
            vol: 2  
        }; 
          
        var b3 = {  
            title: "The Palace of Illusion",  
            Author: "Chitra Banerjee",  
            vol: 1  
        }; 
  
        var books = Backbone.Collection.extend({ 
            model: Book, 
        }); 
  
        var Library = new books([b1, b2, b3]); 
  
        Backbone.sync = function (method, model) { 
            for (let x of model.models) 
                document.write(JSON.stringify(x), '<br>'); 
        }; 
          
        Library.fetch(); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js fetch Collection

Example 2: In this example, we will fetch the data from the API and parse the data and get the username from each data.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS fetch 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 fetch collection</h3> 
      
    <div id='para'></div> 
      
    <script type="text/javascript"> 
        function user_Name(user) { 
            console.log(user.username); 
        } 
  
        var post = Backbone.Model.extend(); 
  
        var posts = Backbone.Collection.extend({ 
            model: post, 
            url: "jsondata/users", 
  
            parse: function (response, options) { 
                _.each(response, user_Name); 
            } 
        }); 
  
        var comments = new posts(); 
        comments.fetch(); 
    </script> 
</body> 
  
</html>