JavaScript

Backbone.Js Collection.FindWhere() Method

In this Backbone.js framework tutorial, we will discuss the findWhere() method in the collection class.

Introduction

Backbone.js is a framework that is used to build web applications that follow the style of JavaScript.

It supports models, events, collections, views, and utilities.

By using any of the previousapplication functionalities, we can create and perform different operations on the given data in a web .

Points to Remember:

  1. It is used with JavaScript.
  2. We can implement the framework inside the <script> tag.
  3. This framework supports JavaScript methods and functions like output and reading input.
  4. <script> tag is placed inside <head> tag or in <body> tag.
  5. It is important to have Content Delivery Network (CDN) links to run the web application on the server.

Let’s See The Structure To Place the Code

<html>

   <head>

        <script>

         You can use Backbone.js framework here

        </script>

   </head>

            <body>

        <script>

         You can also use Backbone.js framework here

        </script>

   </body>

</html>

CDN Links are placed with the src attribute of the script tag.

CDN Links

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>

The findWhere() method in Backbone.js collection is used to return only the first model instance from a collection based on the attribute specified in it. It takes attribute as a parameter.

Syntax:

collection_object.findWhere(attribute)

It takes one parameter.

The attribute is the model’s property in which the findWhere() method will return only the first model instance based on the attribute provided.

If the attribute is not there, it will return undefined.

Approach

1. Create a Backbone model using the extend() method.

Syntax:

var ModelClass = Backbone.Model.extend();

2. Create a Backbone collection using the extend() method and pass the model class.

Syntax:

var CollectionClass = Backbone.Collection.extend({

        model: ModelClass

        });

3. Create an object or instance for the collection class.

Syntax:

var collection_instance = new CollectionClass();

4. Explore the findWhere() method in the Backbone.js collection.

Let’s discuss several examples of the Backbone.js collection findWhere() method.

Example 1: Return the First Model Instance Based on Attribute Using findWhere()

In this example, we will create a Modal class named – Flowers and create a FlowerCollection collection class. We will pass our model class (Flowers) inside it.

After that, we have to create five instances for the Flowers model with three attributes(flower_name,flower_sepals,flower_petals).

We will create a flower_collection, which is an instance of the FlowerCollection collection. And we will add the instances of the Flower model to the collection instance using the add() method.

Now, we will specify some attributes of the model instance to return them using findWhere() through JSON.stringify().

  1. Get only the first model instance where flower_petals is 9.
  2. Get only the first model instance where flower_name is “lilly”
<html>

   <head>

        <script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>

 

        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>

 

   </head>

   <body>

   <center>

   <h1>Linux Hint</h1>

    </center>

    <script>

    //create Model named Flowers using extend()

    var Flowers = Backbone.Model.extend();

 

    //create collection - FlowerCollection and and pass Flowers model

    var FlowerCollection = Backbone.Collection.extend({

    model: Flowers

    });

 

    //create 5 instances for the Flowers model

    var flower1 = new Flowers({flower_name: "lilly",  flower_sepals:3,flower_petals:9});

    var flower2 = new Flowers({flower_name: "lilly",  flower_sepals:10,flower_petals:17});

    var flower3 = new Flowers({flower_name: "rose",  flower_sepals:2,flower_petals:8});

    var flower4 = new Flowers({flower_name: "lilly",  flower_sepals:3,flower_petals:9});

    var flower5 = new Flowers({flower_name: "tulip",  flower_sepals:7,flower_petals:10});

 

        //create flower_collection

        var flower_collection = new FlowerCollection();

 

        //add the above model instances to the flower_collection instance using add(() method.

        flower_collection.add([flower1,flower2,flower3,flower4,flower5]);

        //display the flowers present in the collection

        document.write('<strong>Existing: </strong> ' + JSON.stringify(flower_collection));

        document.write("<br>");

        document.write("<br>");

 

        //get the model First instance where flower_petals is 9.

        document.write('<strong>First flower_petals equal to 9: </strong> ' + JSON.stringify(flower_collection.findWhere({flower_petals: 9})));

 

        document.write("<br>");

        document.write("<br>");

 

        //get theFirst model instance where flower_name is lilly.

        document.write('<strong>First flower_name equal to lilly: </strong> ' + JSON.stringify(flower_collection.findWhere({flower_name: 'lilly'})));

    </script>

   </body>

</html>

Output:

Run the application in your browser by saving the code in the file with .html as an extension.

Here, we can see that there are two model instances that match with flower_petals equal to 9. But findWhere() will return only the first model instance.

There are three model instances that match with flower_name equal to “lilly”, But findWhere() will return only the first model instance.

Example 2: Return First Model Instance Based on Attribute Using findWhere()

In this example, we will create a Modal class named – Flowers and create a FlowerCollection collection class. We will pass our model class (Flowers) inside it.

After that, we have to create five instances for the Flowers model with three attributes(flower_name,flower_sepals,flower_petals).

We will create a flower_collection, which is an instance to the FlowerCollection collection. And we will add the instances of the Flower model to the collection instance using add() method.

Now, we will specify some attributes of the model instance to return them using the findWhere() method through JSON.stringify().

Get only the first model instance where flower_petals is 90.

<html>

   <head>

        <script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>

 

        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>

 

   </head>

   <body>

   <center>

   <h1>Linux Hint</h1>

    </center>

    <script>

    //create Model named Flowers using extend()

    var Flowers = Backbone.Model.extend();

 

    //create collection - FlowerCollection and and pass Flowers model

    var FlowerCollection = Backbone.Collection.extend({

    model: Flowers

    });

 

    //create 5 instances for the Flowers model

    var flower1 = new Flowers({flower_name: "lilly",  flower_sepals:3,flower_petals:9});

    var flower2 = new Flowers({flower_name: "lilly",  flower_sepals:10,flower_petals:17});

    var flower3 = new Flowers({flower_name: "rose",  flower_sepals:2,flower_petals:8});

    var flower4 = new Flowers({flower_name: "lilly",  flower_sepals:3,flower_petals:9});

    var flower5 = new Flowers({flower_name: "tulip",  flower_sepals:7,flower_petals:10});

 

    //create flower_collection

    var flower_collection = new FlowerCollection();

 

    //add the above model instances to the flower_collection instance using add(() method.

    flower_collection.add([flower1,flower2,flower3,flower4,flower5]);

    //display the flowers present in the collection

    document.write('<strong>Existing: </strong> ' + JSON.stringify(flower_collection));

    document.write("<br>");

    document.write("<br>");

 

    //get the model First instance where flower_petals is 9.

    document.write('<strong>First flower_petals equal to 90: </strong> ' + JSON.stringify(flower_collection.findWhere({flower_petals: 90})));

 

 

       
   
    </script>

   </body>

</html>

Output:

The undefined is returned for the attribute flower_petals = 90 since it does not exist.

Conclusion

In this Backbone.js tutorial, we discussed the findWhere() method in the collection. It selects only the first model instance from a collection using the attribute specified inside it. We used the findWhere() method with JSON.stringify() to display the model instances in a collection.

About the author

Gottumukkala Sravan Kumar

B tech-hon's in Information Technology; Known programming languages - Python, R , PHP MySQL; Published 500+ articles on computer science domain