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

45081 Points

6886 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

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

45081 Points

6886 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

JBetancourt

Participant

1360 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

1360 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 ?