如何使用角度js从json获取唯一值?

时间:2023-01-14 12:12:15

Response code : In this response eid is repeated, but I want to dispaly only once.

响应代码:在这个响应中重复了eid,但我想只显示一次。

{"response": [
        {
            "sid": 1,
            "eid": "AA",
            "ename": "AA11"
          },{
            "sid": 2,
            "eid": "AA",
            "ename": "AA11"
          }
    ],
    "status": "success"
}

2 个解决方案

#1


0  

You could use the unique filter from AngularUI

您可以使用AngularUI中的唯一过滤器

<p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>

DEMO

DEMO

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.data = {"response": [
        {
            "sid": 1,
            "eid": "AA",
            "ename": "AA11"
          },{
            "sid": 2,
            "eid": "AA",
            "ename": "AA11"
          }
    ],
    "status": "success"
};
});
</script>
</body> 
</html> 

#2


0  

There is no magic way. This task should primarily be completed before the response lands the client (on server).

没有神奇的方法。此任务应主要在响应落在客户端(服务器上)之前完成。

What you can do is make a function which handles the response the way you prefer.

你可以做的是创建一个以你喜欢的方式处理响应的函数。

e.g.

例如

  //Removes duplicates of eid property
    function getUniqueValues(input) {
        var output = [];

        function existsInOutput(element) {
            return output.map(function(val) {
                return val.eid
            }).includes(element.eid)
        };

        angular.forEach(input,function(val, key) {
            if (!existsInOutput(val)) {
                output.push(val);
            }
        })

        return output;
    }

#1


0  

You could use the unique filter from AngularUI

您可以使用AngularUI中的唯一过滤器

<p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>

DEMO

DEMO

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.data = {"response": [
        {
            "sid": 1,
            "eid": "AA",
            "ename": "AA11"
          },{
            "sid": 2,
            "eid": "AA",
            "ename": "AA11"
          }
    ],
    "status": "success"
};
});
</script>
</body> 
</html> 

#2


0  

There is no magic way. This task should primarily be completed before the response lands the client (on server).

没有神奇的方法。此任务应主要在响应落在客户端(服务器上)之前完成。

What you can do is make a function which handles the response the way you prefer.

你可以做的是创建一个以你喜欢的方式处理响应的函数。

e.g.

例如

  //Removes duplicates of eid property
    function getUniqueValues(input) {
        var output = [];

        function existsInOutput(element) {
            return output.map(function(val) {
                return val.eid
            }).includes(element.eid)
        };

        angular.forEach(input,function(val, key) {
            if (!existsInOutput(val)) {
                output.push(val);
            }
        })

        return output;
    }