我的目标是使用ng-repeat
打印对象,但知道某些键会重复出现。我希望它只在这种情况下打印一次并且我想计算其相似值的平均值。
这是我的数据。
[
{
"0":"1",
"1":"Creativity",
"2":"5",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"1",
"Title":"Creativity",
"Value":"5",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"2",
"1":"Courage",
"2":"4",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"2",
"Title":"Courage",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"3",
"1":"Honnesty",
"2":"4",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"3",
"Title":"Honnesty",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"4",
"1":"Ambition",
"2":"3",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"4",
"Title":"Ambition",
"Value":"3",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"5",
"1":"Integrity",
"2":"4",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"5",
"Title":"Integrity",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"165",
"1":"Creativity",
"2":"4",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"165",
"Title":"Creativity",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"166",
"1":"Courage",
"2":"4",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"166",
"Title":"Courage",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"167",
"1":"Honnesty",
"2":"2",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"167",
"Title":"Honnesty",
"Value":"2",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"168",
"1":"Ambition",
"2":"3",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"168",
"Title":"Ambition",
"Value":"3",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"169",
"1":"Integrity",
"2":"2",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"169",
"Title":"Integrity",
"Value":"2",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"170",
"1":"Creativity",
"2":"4",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"170",
"Title":"Creativity",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"171",
"1":"Courage",
"2":"4",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"171",
"Title":"Courage",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"172",
"1":"Honnesty",
"2":"5",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"172",
"Title":"Honnesty",
"Value":"5",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"173",
"1":"Ambition",
"2":"3",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"173",
"Title":"Ambition",
"Value":"3",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"174",
"1":"Integrity",
"2":"5",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"174",
"Title":"Integrity",
"Value":"5",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
}
]
这是我的HTML
<h3>Overall Ratings: {{ getTotal() }}</h3>
<div class="row">
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Label</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="profile in data | filter:searchFilter">
<td>{{profile.Title}}</td>
<td>{{profile.Value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
问题是输出是这样的:
输出应该是这样的:
[{
"Value": 4.25,
"Title": "Creativity",
},
{
"Value": 2.7,
"Title": "Courage",
},
{
"Value": 3.33,
"Title": "Honnesty",
}, {
"Value": 4.5,
"Title": "Ambition",
}, {
"Value": 5,
"Title": "Integrity",
}
];
答案 0 :(得分:2)
我的ES6解决方案:)
编辑:有点整理。
const data = [{
"0": "1",
"1": "Creativity",
"2": "5",
"3": "1",
"4": "2017-01-17 21:24:42",
"5": "ratings",
"6": null,
"ID": "1",
"Title": "Creativity",
"Value": "5",
"Parent": "1",
"Timestamp": "2017-01-17 21:24:42",
"Category": "ratings",
"Author": null
}, {
"0": "2",
"1": "Courage",
"2": "4",
"3": "1",
"4": "2017-01-17 21:24:42",
"5": "ratings",
"6": null,
"ID": "2",
"Title": "Courage",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-17 21:24:42",
"Category": "ratings",
"Author": null
}, {
"0": "3",
"1": "Honnesty",
"2": "4",
"3": "1",
"4": "2017-01-17 21:24:42",
"5": "ratings",
"6": null,
"ID": "3",
"Title": "Honnesty",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-17 21:24:42",
"Category": "ratings",
"Author": null
}, {
"0": "4",
"1": "Ambition",
"2": "3",
"3": "1",
"4": "2017-01-17 21:24:42",
"5": "ratings",
"6": null,
"ID": "4",
"Title": "Ambition",
"Value": "3",
"Parent": "1",
"Timestamp": "2017-01-17 21:24:42",
"Category": "ratings",
"Author": null
}, {
"0": "5",
"1": "Integrity",
"2": "4",
"3": "1",
"4": "2017-01-17 21:24:42",
"5": "ratings",
"6": null,
"ID": "5",
"Title": "Integrity",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-17 21:24:42",
"Category": "ratings",
"Author": null
}, {
"0": "165",
"1": "Creativity",
"2": "4",
"3": "1",
"4": "2017-01-20 21:12:25",
"5": "ratings",
"6": "18",
"ID": "165",
"Title": "Creativity",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-20 21:12:25",
"Category": "ratings",
"Author": "18"
}, {
"0": "166",
"1": "Courage",
"2": "4",
"3": "1",
"4": "2017-01-20 21:12:25",
"5": "ratings",
"6": "18",
"ID": "166",
"Title": "Courage",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-20 21:12:25",
"Category": "ratings",
"Author": "18"
}, {
"0": "167",
"1": "Honnesty",
"2": "2",
"3": "1",
"4": "2017-01-20 21:12:25",
"5": "ratings",
"6": "18",
"ID": "167",
"Title": "Honnesty",
"Value": "2",
"Parent": "1",
"Timestamp": "2017-01-20 21:12:25",
"Category": "ratings",
"Author": "18"
}, {
"0": "168",
"1": "Ambition",
"2": "3",
"3": "1",
"4": "2017-01-20 21:12:25",
"5": "ratings",
"6": "18",
"ID": "168",
"Title": "Ambition",
"Value": "3",
"Parent": "1",
"Timestamp": "2017-01-20 21:12:25",
"Category": "ratings",
"Author": "18"
}, {
"0": "169",
"1": "Integrity",
"2": "2",
"3": "1",
"4": "2017-01-20 21:12:25",
"5": "ratings",
"6": "18",
"ID": "169",
"Title": "Integrity",
"Value": "2",
"Parent": "1",
"Timestamp": "2017-01-20 21:12:25",
"Category": "ratings",
"Author": "18"
}, {
"0": "170",
"1": "Creativity",
"2": "4",
"3": "1",
"4": "2017-01-20 21:16:53",
"5": "ratings",
"6": "18",
"ID": "170",
"Title": "Creativity",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-20 21:16:53",
"Category": "ratings",
"Author": "18"
}, {
"0": "171",
"1": "Courage",
"2": "4",
"3": "1",
"4": "2017-01-20 21:16:53",
"5": "ratings",
"6": "18",
"ID": "171",
"Title": "Courage",
"Value": "4",
"Parent": "1",
"Timestamp": "2017-01-20 21:16:53",
"Category": "ratings",
"Author": "18"
}, {
"0": "172",
"1": "Honnesty",
"2": "5",
"3": "1",
"4": "2017-01-20 21:16:53",
"5": "ratings",
"6": "18",
"ID": "172",
"Title": "Honnesty",
"Value": "5",
"Parent": "1",
"Timestamp": "2017-01-20 21:16:53",
"Category": "ratings",
"Author": "18"
}, {
"0": "173",
"1": "Ambition",
"2": "3",
"3": "1",
"4": "2017-01-20 21:16:53",
"5": "ratings",
"6": "18",
"ID": "173",
"Title": "Ambition",
"Value": "3",
"Parent": "1",
"Timestamp": "2017-01-20 21:16:53",
"Category": "ratings",
"Author": "18"
}, {
"0": "174",
"1": "Integrity",
"2": "5",
"3": "1",
"4": "2017-01-20 21:16:53",
"5": "ratings",
"6": "18",
"ID": "174",
"Title": "Integrity",
"Value": "5",
"Parent": "1",
"Timestamp": "2017-01-20 21:16:53",
"Category": "ratings",
"Author": "18"
}]
const modifiedData = Object.values(
[...new Set(data.map(({Title}) => Title))]
.reduce((a, v, i) => ({
...a, [i]: {
"Title": v,
"Value": data
.filter(({Title}) => Title === v)
.map(({Value}) => +Value)
.reduce((a, v, i, {length}) => {
const sum = a + v;
return (i === length - 1) ? sum / length : sum
})
}
}), {})
)
console.log(modifiedData);
答案 1 :(得分:2)
您可以尝试使用角度滤镜(https://github.com/a8m/angular-filter)
以下是摘录:
var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.getAvg = function(values) {
var sum = 0;
for (var i=0;i<values.length;i++) {
sum += parseInt(values[i].Value)
}
return sum/values.length
};
$scope.data = [
{
"0":"1",
"1":"Creativity",
"2":"5",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"1",
"Title":"Creativity",
"Value":"5",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"2",
"1":"Courage",
"2":"4",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"2",
"Title":"Courage",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"3",
"1":"Honnesty",
"2":"4",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"3",
"Title":"Honnesty",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"4",
"1":"Ambition",
"2":"3",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"4",
"Title":"Ambition",
"Value":"3",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"5",
"1":"Integrity",
"2":"4",
"3":"1",
"4":"2017-01-17 21:24:42",
"5":"ratings",
"6":null,
"ID":"5",
"Title":"Integrity",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-17 21:24:42",
"Category":"ratings",
"Author":null
},
{
"0":"165",
"1":"Creativity",
"2":"4",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"165",
"Title":"Creativity",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"166",
"1":"Courage",
"2":"4",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"166",
"Title":"Courage",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"167",
"1":"Honnesty",
"2":"2",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"167",
"Title":"Honnesty",
"Value":"2",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"168",
"1":"Ambition",
"2":"3",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"168",
"Title":"Ambition",
"Value":"3",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"169",
"1":"Integrity",
"2":"2",
"3":"1",
"4":"2017-01-20 21:12:25",
"5":"ratings",
"6":"18",
"ID":"169",
"Title":"Integrity",
"Value":"2",
"Parent":"1",
"Timestamp":"2017-01-20 21:12:25",
"Category":"ratings",
"Author":"18"
},
{
"0":"170",
"1":"Creativity",
"2":"4",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"170",
"Title":"Creativity",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"171",
"1":"Courage",
"2":"4",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"171",
"Title":"Courage",
"Value":"4",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"172",
"1":"Honnesty",
"2":"5",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"172",
"Title":"Honnesty",
"Value":"5",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"173",
"1":"Ambition",
"2":"3",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"173",
"Title":"Ambition",
"Value":"3",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
},
{
"0":"174",
"1":"Integrity",
"2":"5",
"3":"1",
"4":"2017-01-20 21:16:53",
"5":"ratings",
"6":"18",
"ID":"174",
"Title":"Integrity",
"Value":"5",
"Parent":"1",
"Timestamp":"2017-01-20 21:16:53",
"Category":"ratings",
"Author":"18"
}
];
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table ng-repeat="(key, value) in data | groupBy: 'Title'">
<tr>
<td>{{key}}</td>
<td>{{getAvg(value)}}
</tr>
</table>
</div>
&#13;
答案 2 :(得分:0)
您可以遍历原始数据<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="app" ng-controller="myCtrl">
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Label</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="profile in modifiedData | filter:searchFilter">
<td>{{profile.Title}}</td>
<td>{{profile.Value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
并重复它们,如下所示。我已经使用lodash来简化数组和对象的使用。
{{1}}&#13;
{{1}}&#13;
答案 3 :(得分:0)
您可以创建一个简单的service
,它在将数据渲染到DOM之前实际过滤数据。请参阅plunker
app.service('calcAverage', function () {
return function (input) {
output = {
titles: [],
values: [],
repeated:[]
};
var tempIndex = 0;
angular.forEach(input, function (val, key) {
tempIndex = output.titles.indexOf(val.Title);
if (tempIndex === -1) {
output.titles.push(val.Title);
output.values.push(val.Value);
output.repeated.push(1);
} else {
output.repeated[tempIndex] += 1
output.values[tempIndex] = ((parseInt(output.values[tempIndex]) + parseInt(val.Value)));
}
})
return output.titles.map(function (val, index) {
return {
Title: val,
Value: (output.values[index] / output.repeated[tempIndex]).toFixed(2)
}
})
}
});
然后在你的控制器中:
$scope.data = calcAverage($scope.data);