Filter and Fetch Property Listings by User Preferences

Introduction

AngularJS controller manages property filtering based on user preferences. The code snippet initializes arrays to store checkbox selections, uses jQuery for DOM manipulation, and sends HTTP requests to fetch property listings. Key considerations include AngularJS practices, jQuery integration, and best practices for security and validation.

This overview provides insights into using AngularJS for dynamic web applications, emphasizing its role in data binding, HTTP communication, and maintaining application security.

Code

angular.module('myApp', [])
    .controller('myController', function ($scope, $http) {
        //debugger;
        //alert('OK');
        //$scope.imageUrl = '';
        $scope.pgPreferredchk = function () {
            console.log($scope.pgPreferred);
            debugger;
            var pgpreferredfor = [];
            var occupancyfor = [];
            var localityfor = [];
            var Budgetfor = [];
            var aminitiesfor = [];
            var furniturefor = [];
            $scope.gtval = "";
            $scope.ocupancyval = "";
            $scope.localityval = "";
            $scope.budgetval = "";
            $scope.aminitiesval = "";
            $scope.furnitureval = "";
            var pgpreferredforArr = $("input[name*='chkPg']");
            console.log(pgpreferredforArr.length);
            $.each(pgpreferredforArr, function (i, item) {
                debugger;
                if (pgpreferredforArr[i].checked) {
                    pgpreferredfor.push($(item).val() + "~");
                    $scope.gtval += $(item).val() + "~";
                    $scope.pgval1 = $scope.gtval.toString();
                    $scope.pgfilter = $scope.pgval1;
                }
            });
            var occupancyforArr = $("input[name*='chkOccupancy']");
            $.each(occupancyforArr, function (i, item) {
                //debugger;
                if (occupancyforArr[i].checked) {
                    occupancyfor.push($(item).val() + "~");
                    $scope.ocupancyval += $(item).val() + "~";
                    $scope.pgval2 = $scope.ocupancyval.toString();
                    $scope.ocupancyvalfilter = $scope.pgval2;
                    //console.log($scope.gtval);
                }
            });
            var localityforArr = $("input[name*='chkLocality']");
            $.each(localityforArr, function (i, item) {
                //debugger;
                if (localityforArr[i].checked) {
                    localityfor.push($(item).val() + "~");
                    $scope.localityval += $(item).val() + "~";
                    $scope.pgval3 = $scope.localityval.toString();
                    $scope.localityvalfilter = $scope.pgval3;
                    //console.log($scope.gtval);
                }
            });
            var BudgetforArr = $("input[name*='chkBudget']");
            $.each(BudgetforArr, function (i, item) {
                //debugger;
                //console.log(BudgetforArr[i]);
                if (BudgetforArr[i].checked) {
                    Budgetfor.push($(item).val() + "~");
                    $scope.budgetval += $(item).val() + "~";
                    $scope.pgvals4 = $scope.budgetval.toString();
                    $scope.budgetvalfilter = $scope.pgvals4;
                    //console.log($scope.gtval);
                }
            });
            var aminitiesforArr = $("input[name*='chkAmenities']");
            $.each(aminitiesforArr, function (i, item) {
                //debugger;
                //console.log(aminitiesforArr[i]);
                if (aminitiesforArr[i].checked) {
                    aminitiesfor.push($(item).val() + "~");
                    $scope.aminitiesval += $(item).val() + "~";
                    $scope.pgvals5 = $scope.aminitiesval.toString();
                    $scope.aminitiesvalfilter = $scope.pgvals5;
                    //console.log($scope.gtval);
                }
            });
            var furnitureforArr = $("input[name*='chkFurnishing']");
            //console.log(furnitureforArr.length);
            $.each(furnitureforArr, function (i, item) {
                //debugger;
                //console.log(furnitureforArr[i]);
                if (furnitureforArr[i].checked) {
                    furniturefor.push($(item).val() + "~");
                    $scope.furnitureval += $(item).val() + "~";
                    $scope.pgvals6 = $scope.furnitureval.toString();
                    $scope.furniturevalfilter = $scope.pgvals6;
                    //console.log($scope.gtval);
                }
            });
            $http({
                url: "controllername/methodname",
                method: "POST",
                dataType: 'json',
                data: {
                    Name: $scope.pgfilter,
                    occupa: $scope.ocupancyvalfilter,
                    loclity: $scope.localityvalfilter,
                    budget: $scope.budgetvalfilter,
                    aminiti: $scope.aminitiesvalfilter,
                    furniture: $scope.furniturevalfilter
                },
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(function (response) {
                debugger;
                $scope.pgPreferred = response.data._FilterPropertyList;
                //console.log($scope.getval);
            });
        };
    });

• Initialization and Setup: The controller initializes several arrays (pgpreferredfor, occupancyfor, localityfor, etc.) to store selected values from different groups of checkboxes corresponding to property preferences.
• Checkbox Processing: Using jQuery for DOM manipulation, the code iterates through groups of checkboxes (chkPg, chkOccupancy, etc.). It checks which checkboxes are selected and stores their values in respective arrays (pgpreferredfor, occupancyfor, etc.). These selected values are also concatenated into $scope variables ($scope.gtval, $scope.ocupancyval, etc.).
• HTTP Request ($http): After processing the selected checkboxes, an HTTP POST request is made to "Master/PropertyList". This request sends JSON data containing the selected filter values ($scope.pgfilter, $scope.ocupancyvalfilter, etc.) to the server. It expects property listings in JSON format (response.data._FilterPropertyList) as a successful response.
• Data Binding and Updates: On a successful response from the server, the fetched property listings (response.data._FilterPropertyList) are assigned to $scope.pgPreferred. This variable likely updates the UI to display the filtered property listings.

Conclusion

This AngularJS controller example illustrates the integration of data binding, HTTP communication, and jQuery for DOM manipulation to facilitate dynamic filtering of property listings based on user preferences. As web development continues to evolve, transitioning to newer frameworks and adopting best practices ensures scalable, secure, and maintainable applications.