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

Question

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

var app = angular.module('acturial', ['ui.bootstrap']);

////configure routes
//// TODO:Will implement and configure routes but for now it is not needed
//app.config(function ($routeprovider) {
//    $routeprovider

//        // route for default page
//        // in our case only page exists for now
//        .when('/', { templateurl: 'Index.html', controller: 'Regioncontroller' })

//    //todo: can able to add more pages using by specifying the condition in when clause
//});

var RegionController = function ($scope, $http) {

    $scope.title = "Acturial App";
    //$scope.data = [{
    //    "name": "Billings",
    //    "values": ['300031', '300051', '300091', '300111', '300131']
    //}];


    var regionDetails = [
        {
            "date": "6/30/2022",
            "regionOffice": [
                {
                    "name": "Valdosta",
                    "values": [
                        "300031",
                        "300051",
                        "300091",
                        "300111",
                        "300131"
                    ]
                },
                {
                    "name": "Jackson",
                    "values": [
                        "300031",
                        "300051",
                        "300091",
                        "300111",
                        "300131"
                    ]
                },
                {
                    "name": "Springfield",
                    "values": [
                        "300031",
                        "300051",
                        "300091",
                        "300111",
                        "300131"
                    ]
                },
                {
                    "name": "Billings",
                    "values": [
                        "300031",
                        "300051",
                        "300091",
                        "300111",
                        "300131"
                    ]
                }
            ]
        },
        {
            "date": "7/30/2023",
            "regionOffice": [

                {
                    "name": "Springfield",
                    "values": [
                        "300031",
                        "300051",
                        "300091",
                        "300111",
                        "300131"
                    ]
                },
                {
                    "name": "Billings",
                    "values": [
                        "300031",
                        "300051",
                        "300091",
                        "300111",
                        "300131"
                    ]
                }
            ]
        }
    ];

    $scope.dataArray = regionDetails;
    //var billingDetails = {
    //    name: 'Billings',
    //    values: ['300031', '300051', '300091', '300111', '300131']
    //}

    //$scope.data = billingDetails;

    // TODO:Still have to make some improvements for the below functions
    // The below code will be used when we have WebAPI endpoint so we can use that to populate the data
    // instead of the static/hard-coded data
    //var onUserComplete = function (response) {
    //    $scope.data = response.data;
    //    $http.get($scope.regionUrl)
    //        .then(onRepos, onError);
    //}

    //onRepos = function (response) {
    //    $scope.data = response.data;
    //};

    //var onError = function (response) {
    //    $scope.error = "Couldn't able to retreive the data";
    //}

    $scope.expandedRegion = null;

    $scope.manageCollapseExpand = function (obj, isExpandedRegion) {
        obj.expanded = !obj.expanded;

        if (obj.expanded) {
            if (!isExpandedRegion) {
                $scope.expandedRegion = obj;
            }
        }
    }
};

app.controller("RegionController", ["$scope", "$uibModal", "$http", RegionController]);

Here is the HTML Page

<!DOCTYPE html>
<html ng-app="acturial" ng-controller="RegionController">

<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="acturial.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <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" />
    <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" />
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="">
        <label>
            Filing Date:
        </label>
         <select ng-model="data.date" ng-options="data.date for data in dataArray" >
        <option value=""> </option>
    </select>
        <br />
    </div>
    <div class="">
        <button class="btn" ng-click="manageCollapseExpand(region, false)">
            <span ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>
        </button>
        {{region.name}} ({{region.values.length}})
    </div>
    <div class="" ng-show="region.expanded">
        <div class="" ng-repeat="value in region.values">
            <div class="">
                {{value}}
            </div>
        </div>
    </div>
</body>
</html>

How can I bind the data associated with the drop-down selected value and display below?

Below is the structured array I am seeing in the Console:

Answer 1

We'll set up the data like this because ng-options (and choosing a default pre-selected option) requires binding to the same object. On the same object, we'll bind the chosen date, and the full array. Plus we need a variable for the index, which will be used to associate the office list with a particular date.

$scope.selectedDateIndex= null
$scope.ds = {};
$scope.ds.dataArray = regionDetails;
$scope.ds.date = $scope.ds.dataArray[0].date // this is our default  pre-selected date
$scope.onSelectDate() // this will trigger showing the default date's office list

// this function will take the date that is chosen, find the data set in the array that matches, and set the `$scope.selectedDateIndex` we'll need
    $scope.onSelectDate =  function () {
      let date = $scope.ds.date;
       console.log(date)
        $scope.ds.dataArray.forEach((el, index) => {
            if (el.date == date) $scope.selectedDateIndex = index
        })
    }

For the <select>, set up an ng-change method. Also, notice the ng-model points at the object we set up before, and ng-options has this format optionValue as optionName forEach item in dataArray. For this to work, angular has to associate both option name and value.

<select ng-model="ds.date" 
    ng-options="data.date as data.date for data in ds.dataArray" 
    ng-change="onSelectDate()">
</select>

Then, here you had 2 outer divs, both using the region object which was wrong. I combined them. Your toggle button shouldn't call an outside function - just set region.expanded = !region.expanded. That way we keep it inside the object region which only exists in this loop.

<div class="" 
    ng-if="selectedDateIndex !== null" 
    ng-repeat="region in ds.dataArray[selectedDateIndex].regionOffice">
    <!-- for the rest of this loop we can work with the `region` object -->
    
    <button class="btn" ng-click="region.expanded = !region.expanded">
        <span 
            ng-class="{'glyphicon glyphicon-minus': region.expanded, 'glyphicon glyphicon-plus': !region.expanded }"></span>
    </button>
    {{region.name}} ({{region.values.length}})
    <div class="" ng-show="region.expanded">
        <div class="" 
            ng-repeat="value in region.values">
            <div class="">
                {{value}}
            </div>
        </div>
    </div>
</div>

I can't test this, so if you run into an error, let me know.