Any help appreciated. I have a JSON data with format like this
{ state1: [ member1, member2], state2: [ member,member4…], … }
And there is a dropdown which shows the list of states on the JSON data. Based on the selected state I need to display the corresponding list of member on the table.
angular.module('mainModule', []).controller('FetchController', ['$scope', function($scope) { $scope.datas = { "MN": [{ "id": "727344064", "address": "8614 LIPSEY PKWY", "city": "LEWISTON", "firstName": "DAINA", "lastName": "FASSETT", "state": "MN", "zip": "55952" }, { "id": "222743521", "address": "2220 KIEL PKWY", "city": "ROCHERT", "firstName": "MIKI", "lastName": "MCSHANE", "state": "MN", "zip": "56578" }, { "id": "581993933", "address": "5933 JAWORSKI RD", "city": "UTICA", "firstName": "GIANNA", "lastName": "LAFAVE", "state": "MN", "zip": "55979" } ], "IL": [{ "id": "101396885", "address": "4829 JAUREGUI BLVD", "city": "CORCORAN", "firstName": "CAROLA", "lastName": "ALVA", "state": "IL", "zip": "55357" }, { "id": "61041160", "address": "9574 OMEARA PKWY", "city": "ROCKFORD", "firstName": "CHERY", "lastName": "TWOMEY", "state": "IL", "zip": "55373" }, { "id": "890443901", "address": "9259 ZITO AVE", "city": "CHANHASSEN", "firstName": "LIZZETTE", "lastName": "JAUREGUI", "state": "IL", "zip": "55317" }, { "id": "416775920", "address": "6743 CADDELL RD", "city": "PIERZ", "firstName": "SANDIE", "lastName": "NIGRO", "state": "IL", "zip": "56364" }, { "id": "519809487", "address": "5544 MCKINZIE BLVD", "city": "BLOOMINGTON", "firstName": "ALESHIA", "lastName": "FINGER", "state": "IL", "zip": "55435" } ], "NY": [{ "id": "309969937", "address": "3306 SAARI ST", "city": "CORMORANT", "firstName": "TWANNA", "lastName": "HURDLE", "state": "NY", "zip": "56572" }, { "id": "12713045", "address": "8211 PENDLEY BLVD", "city": "SOUDAN", "firstName": "YULANDA", "lastName": "MARROW", "state": "NY", "zip": "55782" }, { "id": "108468358", "address": "3167 BIBB ST", "city": "DEXTER", "firstName": "JEANMARIE", "lastName": "HURDLE", "state": "NY", "zip": "55926" } ], "OK": [{ "id": "93804840", "address": "6236 NICKLES BLVD", "city": "ANDOVER", "firstName": "RICKI", "lastName": "KEARSE", "state": "OK", "zip": "55304" }, { "id": "536729166", "address": "1939 HURDLE BLVD", "city": "ABMPS", "firstName": "LAQUANDA", "lastName": "RIDENHOUR", "state": "OK", "zip": "55472" } ] } }]);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="mainModule" ng-cloak> <div class="container" ng-controller="FetchController"> <h3>File Viewer App</h3> <form name="myForm"> <label for="selectState"> Select the state: </label> <select name="selectState" id="selectState" ng-model="selectedState"> <option ng-repeat="(state,members) in datas" value="{{state}}">{{state}}</option> </select> </form> <br /> <div> <h4> Members from state: </h4> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Address</th> <th>City</th> <th>First Name</th> <th>Last Name</th> <th>State</th> <th>Zip</th> </tr> </thead> <tbody> <!--I need to display list of selected state here --> </tbody> </table> </div> </div> </div>
Based on the selected state I need to display the list of member in the table with dynamic binding.
Plunker link click here
Advertisement
Answer
It’s been a while since I did something in Angular JS for the last time 🙂
In your Plunker example, there ist already:
ng-change="changeSelectedState()"
but you are missing the implementation.
I would suggest the following approach:
$scope.selectedState = ""; $scope.selectedMembers = []; $scope.changeSelectedState = function() { $scope.selectedMembers = $scope.datas[$scope.selectedState]; };
where $scope.selectedState is a scope variable holding the selected state value, ex. “MN” and $scope.selectedMembers contains the array with the corresponding state members.
The last thing you should do is implement the ng-repeat loop on the member table.