How to get the distinct value from scope variable in controller using Angular JS ?

Reply

Member

79 Points

How to get the distinct value from scope variable in controller using Angular JS ?

May 11, 2017 01:24 PM|kaviyarasan|LINK

$scope.items = [
{
sourceBuildingId: "B001",
sourceBuildingName: "Building 1",
destinationBuildingId: "B002"
destinationBuildingName: "Building 2" 
},
{
sourceBuildingId: "B003",
sourceBuildingName: "Building 3",
destinationBuildingId: "B002",
destinationBuildingName: "Building 2" 
},
{
sourceBuildingId: "B001",
sourceBuildingName: "Building 1",
destinationBuildingId: "B003",
destinationBuildingName: "Building 3" 
},
{
sourceBuildingId: "B002",
sourceBuildingName: "Building 2",
destinationBuildingId: "B004",
destinationBuildingName: "Building 4" 
}];

$scope.destinationBuildingIdList=""; ???

How to fetch the distinct building ID list alone from $scope.items and store into $scope.destinationBuildingIdList variable?

Reply

Zhi Lv - MSF...

All-Star

45489 Points

7008 Posts

Microsoft

Re: How to get the distinct value from scope variable in controller using Angular JS ?

May 12, 2017 07:09 AM|Zhi Lv - MSFT|LINK

Hi Kaviyarasan,

According to your description, you want to distinct the destination building’s value by destinationBuildingId and then push them into destinationBuildingIdList.

I wrote an example, perhaps it can help you.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="item in destinationBuildingIdList" style="margin-top:5px">
            <div>destinationBuildingId:{{item.destinationBuildingId}}</div>
            <div>destinationBuildingName:{{item.destinationBuildingName}}</div>
        </div>
    </div>
</body>
</html>
<script src="@(Url.Content("~/Scripts/angular.min.js"))"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.items = [{
            sourceBuildingId: "B001",
            sourceBuildingName: "Building 1",
            destinationBuildingId: "B002",
            destinationBuildingName: "Building 2"
        }, {
            sourceBuildingId: "B003",
            sourceBuildingName: "Building 3",
            destinationBuildingId: "B002",
            destinationBuildingName: "Building 2"
        }, {
            sourceBuildingId: "B001",
            sourceBuildingName: "Building 1",
            destinationBuildingId: "B003",
            destinationBuildingName: "Building 3"
        }, {
            sourceBuildingId: "B002",
            sourceBuildingName: "Building 2",
            destinationBuildingId: "B004",
            destinationBuildingName: "Building 4"
        }];
        $scope.destinationBuildingIdList = [];
        angular.forEach($scope.items, function (value, key) {
            var isIn = false;
            for (var i = 0; i < $scope.destinationBuildingIdList.length; i++) {
                if ($scope.destinationBuildingIdList[i].destinationBuildingId == value.destinationBuildingId) {
                    isIn = true;
                    break;
                }
            }
            if (!isIn) {
                $scope.destinationBuildingIdList.push({ destinationBuildingId: value.destinationBuildingId, destinationBuildingName: value.destinationBuildingName });
            }
        });
    });
</script>

Then, the result as below:

Best regards,
Dillion

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

kaviyarasan

Member

79 Points

109 Posts

Re: How to get the distinct value from scope variable in controller using Angular JS ?

May 12, 2017 12:44 PM|kaviyarasan|LINK

Hi Zhi Lv - MSF...

Thanks for your solution.

The following solution also working fine,

$scope.destinationBuildingIdList = Array.from(new Set($scope.items.map(o=> o.destinationBuildingId)))

But when we using map function, sometime getting $injector:modulerr Error in IE browser only. why? How to solve this?

Thanks,

Kavin.S

Reply

Zhi Lv - MSF...

All-Star

45489 Points

7008 Posts

Microsoft

Re: How to get the distinct value from scope variable in controller using Angular JS ?

May 15, 2017 02:48 AM|Zhi Lv - MSFT|LINK

Hi Kavin.S,

kaviyarasan
But when we using map function, sometime getting $injector:modulerr Error in IE browser only. why? How to solve this?

As far as I know, the angular js doesn't support IE8 or earlier after v1.2 .

You could check the following link for more details information:

https://docs.angularjs.org/guide/ie

If you have any other questions, please feel free to contact me any time.
Best Regards,
Dillion

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

JBetancourt

Participant

1380 Points

608 Posts

Re: How to get the distinct value from scope variable in controller using Angular JS ?

May 15, 2017 06:01 PM|JBetancourt|LINK

Using lodash you can just do

_.uniqBy($scope.items, 'sourceBuildingId');

-----------------
Please remember to click "Mark as Answer" the responsES that resolved your issue.

Reply

JBetancourt

Participant

1380 Points

608 Posts

Re: How to get the distinct value from scope variable in controller using Angular JS ?

May 17, 2017 02:21 AM|JBetancourt|LINK

Please remember to click "Mark as Answer" the responses that resolved your issue.

-----------------
Please remember to click "Mark as Answer" the responsES that resolved your issue.

Reply

kaviyarasan

Member

79 Points

109 Posts

Re: How to get the distinct value from scope variable in controller using Angular JS ?

May 23, 2017 07:16 AM|kaviyarasan|LINK

Hi JBetancourt,

Thanks for your reply.

_.uniqBy($scope.items, 'sourceBuildingId');

Your above solution fetching the object (full row) based on distinct value of specified column.

but i need to fetch the distinct value for particular column alone i.e. distinctBuildingId list. Following is the solution for get the distinct value for particular column,

$scope.destinationBuildingIdList1=_.uniq(_.map($scope.items, 'destinationBuildingId'))// it fetch only distict value of destinationBuildingId column

Thanks,

Kavin.S

How to get the distinct value from scope variable in controller using Angular JS ?[Answered] RSS

6 replies

Shortcuts

How to get the distinct value from scope variable in controller using Angular JS ?

Re: How to get the distinct value from scope variable in controller using Angular JS ?

Re: How to get the distinct value from scope variable in controller using Angular JS ?

Re: How to get the distinct value from scope variable in controller using Angular JS ?

kaviyarasan

Re: How to get the distinct value from scope variable in controller using Angular JS ?

Re: How to get the distinct value from scope variable in controller using Angular JS ?

Re: How to get the distinct value from scope variable in controller using Angular JS ?