Post
Ask Question
Sandeep Choudary

Sandeep Choudary

  • NA
  • 79
  • 9.8k

Bind data based on the drop down selection from JSON in AngularJS

May 31 2021 3:02 AM
I hope you guys are doing good in this pandemic time and spare some time to help me out.
 
I am trying to filter the data based on the drop-down selections of a drop-down list. Here I will get the data from the JSON input.
 
Here in the Filing Date, I have selected 06/30/2022 so for this date the below region offices are available.
 
So if I change the date to any another date like 07/30/2022 it is showing only 2 region offices
 
 
 
And if we expand the + icon it should display the values like below. That is the requirement and I am done with writing the code for expanding collapse functionality.
 
 
 
However, I am not sure how I need to bind the data associated with the date and display below. Here is the code I have written
  1. var app = angular.module('acturial', ['ui.bootstrap']);  
  2. ////configure routes  
  3. //// TODO:Will implement and configure routes but for now it is not needed  
  4. //app.config(function ($routeprovider) {  
  5. // $routeprovider  
  6. // // route for default page  
  7. // // in our case only page exists for now  
  8. // .when('/', { templateurl: 'Index.html', controller: 'Regioncontroller' })  
  9. // //todo: can able to add more pages using by specifting the condition in when clause  
  10. //});  
  11. var RegionController = function ($scope, $http) {  
  12. $scope.title = "Acturial App";  
  13. //$scope.data = [{  
  14. // "name": "Billings",  
  15. // "values": ['300031', '300051', '300091', '300111', '300131']  
  16. //}];  
  17. var regionDetails = [  
  18. {  
  19. "date": "6/30/2022",  
  20. "regionOffice": [  
  21. {  
  22. "name": "Valdosta",  
  23. "values": [  
  24. "300031",  
  25. "300051",  
  26. "300091",  
  27. "300111",  
  28. "300131"  
  29. ]  
  30. },  
  31. {  
  32. "name": "Jackson",  
  33. "values": [  
  34. "300031",  
  35. "300051",  
  36. "300091",  
  37. "300111",  
  38. "300131"  
  39. ]  
  40. },  
  41. {  
  42. "name": "Springfield",  
  43. "values": [  
  44. "300031",  
  45. "300051",  
  46. "300091",  
  47. "300111",  
  48. "300131"  
  49. ]  
  50. },  
  51. {  
  52. "name": "Billings",  
  53. "values": [  
  54. "300031",  
  55. "300051",  
  56. "300091",  
  57. "300111",  
  58. "300131"  
  59. ]  
  60. }  
  61. ]  
  62. },  
  63. {  
  64. "date": "7/30/2023",  
  65. "regionOffice": [  
  66. {  
  67. "name": "Springfield",  
  68. "values": [  
  69. "300031",  
  70. "300051",  
  71. "300091",  
  72. "300111",  
  73. "300131"  
  74. ]  
  75. },  
  76. {  
  77. "name": "Billings",  
  78. "values": [  
  79. "300031",  
  80. "300051",  
  81. "300091",  
  82. "300111",  
  83. "300131"  
  84. ]  
  85. }  
  86. ]  
  87. }  
  88. ];  
  89. $scope.dataArray = regionDetails;  
  90. //var billingDetails = {  
  91. // name: 'Billings',  
  92. // values: ['300031', '300051', '300091', '300111', '300131']  
  93. //}  
  94. //$scope.data = billingDetails;  
  95. // TODO:Still have to make some improvements for the below functions  
  96. // The below code will be used when we have WebAPI endpoint so we can use that to populate the data  
  97. // instead of the static/hard-coded data  
  98. //var onUserComplete = function (response) {  
  99. // $scope.data = response.data;  
  100. // $http.get($scope.regionUrl)  
  101. // .then(onRepos, onError);  
  102. //}  
  103. //onRepos = function (response) {  
  104. // $scope.data = response.data;  
  105. //};  
  106. //var onError = function (response) {  
  107. // $scope.error = "Couldn't able to retreive the data";  
  108. //}  
  109. $scope.expandedRegion = null;  
  110. $scope.manageCollapseExpand = function (obj, isExpandedRegion) {  
  111. obj.expanded = !obj.expanded;  
  112. if (obj.expanded) {  
  113. if (!isExpandedRegion) {  
  114. $scope.expandedRegion = obj;  
  115. }  
  116. }  
  117. }  
  118. };  
  119. app.controller("RegionController", ["$scope", "$uibModal", "$http", RegionController]);  
Here is the HTML Page
  1. <!DOCTYPE html>  
  2. <html ng-app="acturial" ng-controller="RegionController">  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>{{title}}</title>  
  6. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>  
  7. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>  
  8. <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>  
  9. <script src="Scripts/angular.js"></script>  
  10. <script src="acturial.js"></script>  
  11. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>  
  12. <link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />  
  13. <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />  
  14. <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">  
  15. </head>  
  16. <body>  
  17. <div class="">  
  18. <label>  
  19. Filing Date:  
  20. </label>  
  21. <select ng-model="data.date" ng-options="data.date.name for data in dataArray" >  
  22. <option value=""> </option>  
  23. </select>  
  24. <br />  
  25. </div>  
  26. <div class="">  
  27. <button class="btn" ng-click="manageCollapseExpand(region, false)">  
  28. <span ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>  
  29. </button>  
  30. {{region.name}} ({{region.values.length}})  
  31. </div>  
  32. <div class="" ng-show="region.expanded">  
  33. <div class="" ng-repeat="value in region.values">  
  34. <div class="">  
  35. {{value}}  
  36. </div>  
  37. </div>  
  38. </div>  
  39. </body>  
  40. </html>  
So can you please help me with binding the data associated with the drop-down selected value and display below?

Answers (1)