How To Implement Real Time Filter Using AngularJS And Django ? (original) (raw)

In this tutorial, we will integrate an existing Django application with the angularjs to implement a real time filter on list of items. Filters are super easy to implement in angularjs, unlike Django.

What are Real Time Filters ?

Real Time Filter is a feature to improve the overall user experience in a site. It filter’s list of items, as per a specific criteria without refreshing the entire page.

AngularJs comes with predefined filter classes for filtering the content at runtime and improving the overall user experience.

We will implement a filter on the list of jobs that have been scrapped by the Beautiful Soup library in python and pass list to the angularjs function call to do the rest of the work.

Step 1: (Install AngularJS)

In our tutorial, we have downloaded angularjs libraries and then added them to our project.

If you don’t have these libraries, Please follow the link below to install them.

Go to https://angularjs.org/ and download the angular js zip.

Step 2: (Add ZIP Folder to Your Existing Django App)

After you have downloaded and extracted the angularjs zip folder.

Paste it to your django project folder.

Just have a look at our sample project directory structure:

We have pasted the extracted angularjs libraries in static/javascript/angular folder.

With this, you will have successfully added angularjs libraries to your existing Django project.

Note: Django uses a static directory to access all the external files like js, CSS, images. make sure your STATIC_DIR path is configured in APP_NAME in project’s Settings.py.

Also, remember to load STATIC files by loading {% load static %} in HTML template.

Step 3: (Gather the Data by Scraping in Python)

In our case, we are scraping the jobs from different sites and are storing them in a list.

Class Object

In the above code, JOBS is the list of objects of class Job. The list is populated by scraping the job details like job_name,job_link, job_name from different sites, and adding them to the list at line no 36.

The results list is them converted into a dictionary value for every obj in JOBS array.

Then the context[‘JOBS’] stores the JSON representation of the results list.

The context is returned from the view in the last line.

Step 5: (Render the results in the page)

After returning the context, we will display the results in an HTML page.

Below is the code for angularjs inside the script tag.

angularjs app controller

At line no. 15, we have loaded the angularjs library inside the script tag.

At line no. 17 & 18, we have defined our module and controller.

At line no. 19, $scope.result is a variable that stores the JOBS which was passed through the context from the view.

The |safe is a directive that is used when we have to access the list.

After this code, $scope.result will contain the list of jobs that have been passed by context.

Also, make sure to add the controller and the module name in the directives ng-controller and ng-app respectively in the body tag.

ng-controller

Now, we add the ng-model directive on the input text to implement the filter on the input.

It tells angular to filter the results according to the job_name attribute.

input type text

Finally, we include the angular code to display the result in a div inside the {% verbatim %} and {% endverbatim %} tag.

The ng-repeat directive tells to repeat the below code as long as the condition evaluates to true.

I.e the row will be printed as long as the item in result|filter:searchValue.job_name holds true.

{{item.job_image}} would display the image_path and so on.

Final Output:

After all the above implementation, the page should look like below:- .

When a user enters some value in the search box, the job list is filtered according to user input at run time.

Conclusion:

You have successfully implemented a filter with angularjs and Django. Feel free to ping me for any assistance. (shriniketdeshmukh111(at)gmail.com)

Comment below in case you face any difficulties in this tutorial. I would love to help you guys!

Please do share this article , if it helps you .

Happy Coding!