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:

What isn't working/? It appears wired correctly. What isn't happening that you want to be happening? — Kinglish
– Kinglish, Commented May 31, 2021 at 3:10
@Kinglish I am getting the date field but I am not sure how to bind and display the data based on the dropdown selected list. — Sandeep
– Sandeep, Commented May 31, 2021 at 3:56

Kinglish · Accepted Answer · 2021-06-01 18:58:01Z

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.

That was not part of your initial code or requirement. You asked how to bind the date from the pulldown to the display, and hopefully this code does that. I showed how to affect the display based on the date selected, and how to display the values based on the region selected.
Thanks for showing me that, I am okay without a table but the code you gave is not displaying anything in the HTML. I just need to bind the data based on dropdown selection and display the data associated with the input given. I will update it later for now I just need to display data. Thanks for guiding me though
Ok, i can help step you through it. Are you seeing the select menu options? When you select one, do you get an error in the javascript?
I couldn't able to see anything on the HTML page. I did the Inspect but I believe it is not rendering to the HTML. I am seeing the below in the HTML body

Collectives™ on Stack Overflow

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

1 Answer 1

21 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

21 Comments

Related