AngularJS – Display the list of data based on the selected value

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

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.

Edit: https://plnkr.co/edit/BjFark20dScLGUm2