[英]Filtering data in Angular that comes from Web Api calls seems that I get a lot of scrubbing to do
Seems that the current website is asp.net web forms calling web api, I am converted to Angular calling Web api. 似乎当前的网站是asp.net Web窗体调用Web api,我转换为Angular调用Web api。 The thing I am noticing is that I need to scrub the data.
我注意到的是,我需要清理数据。
How should I go about doing this? 我应该怎么做呢?
Conditionals in the Html ? HTML中的条件句?
example of old website output 旧网站输出示例
Device Status Staged Archived
-----------------------------------------
Unactivated None 002,003,001
New Device None None
MY Angular /html output MY Angular / html输出
Device Status Staged Archived
-----------------------------------------
3 null [002,003,001]
1 null []
I thought about in Javascript ... as that is probably better than doing it in Html with angular 我在Javascript中考虑过...因为这可能比在HTML中使用angular更好
Thoughts? 有什么想法吗?
How to do it either way , best practice? 如何做,最好的做法?
Sample Data 样本数据
{
"Devices": [
{
"DeviceId": "00022B9A000000010001",
"StagedManifestIdList": [],
"PendingManifestId": null,
"PendingTimeStamp": "0001-01-01T00:00:00",
"ManifestIdList": [
"00000002",
"00000001",
"00000003"
],
"DeviceStatus": 3,
"Aid": "oAAABTUAAg==",
"DKiIndex": "DKi00000002",
"Sha": "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us=",
"DefaultPayload": "C:\\ProgramData\\\\Payloads\\M4PayloadAuto.xml"
},
........
]
}
Data $http call 数据$ http调用
Where does let statement go? 语句放到哪里去?
let result.statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];
function DeviceController($http, $scope){
var vm = this;
var dataService = $http;
//dataService.get("/api/Product")
vm.devices = [];
deviceList();
function deviceList() {
$http.get(_url)
.then(function (result) {
vm.devices = result.data.Devices;
},
function(error) {
console.log('error');
});
Without posting actual data you have, I am assuming you get an array back like the following: 在不发布实际数据的情况下,我假设您将获得如下数组:
[
{ status: 3, archived: [002, 003, 001] },
{ status: 1, archived: [] }
]
In order to display the status somewhere you obviously need a lookup for the correct description, for example: 为了在某处显示状态,您显然需要查找正确的描述,例如:
let statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];
With this data, you have a few options for how to display the data. 使用此数据,您可以选择几种方式来显示数据。 As the conversions are quite simple, it would be fine to do the conversions right there in angular.
由于转换非常简单,因此可以在那里进行角度转换。 For example:
例如:
{{statuses[item.status]}}
{{item.archived.join(',')}}
However, if the data or display requirements are more complex, I would convert the data upon retrieval. 但是,如果数据或显示要求更复杂,我将在检索时转换数据。 This is better practice, and will be able to deal with changes more easily, but will require more code.
这是一种更好的做法,将能够更轻松地处理更改,但需要更多代码。 There are different ways to do this, but ultimately just mean updating the data object prior to assigning it to
$scope
. 有多种方法可以执行此操作,但最终只是意味着在将数据对象分配给
$scope
之前对其进行更新。
UPDATE 更新
As far as best practices go, it is hard to say for this, because I don't know what other data requirements there are with the project (ie is the data ever written back, etc.) 就最佳实践而言,这很难说,因为我不知道项目还有其他数据要求(即是否曾经写回数据等)。
So at this stage, what I would do is simply setup some view functions within your controller. 因此,在此阶段,我要做的只是在控制器中设置一些视图功能。 So inside your controller, you might have something like the following:
因此,在您的控制器内部,您可能会遇到以下内容:
// usage {{statuses[item.status]}}
$scope.statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];
// usage {{displayArchived(item.archives)}}
$scope.displayArchived = function(archives){
return (archives.length > 0) ? archives.join(',') : 'none';
};
Then you can reference these arrays and functions in your view. 然后,您可以在视图中引用这些数组和函数。 If you need to display this information on different views, or if the requirements get more complicated, then I would make a service that returns an object with all the helper functions that you need, which you can inject and assign to
$scope
whenever you need it. 如果您需要在不同的视图上显示此信息,或者需求变得更加复杂,那么我将提供一项服务,该服务返回一个具有所需所有辅助功能的对象,您可以在需要时将其注入并分配给
$scope
它。
Make changes in your WebApi to get the results you expect. 在WebApi中进行更改以获得预期的结果。 If Im not wrong, the device status is an enum in server side, which you could send back the text of enum in the api response.
如果Im没错,则设备状态为服务器端的枚举,您可以在api响应中将其枚举发回。 And the archived seems to be an array/List which again you could convert to comma seperated string if client needs it that way - string.Join(", ", yourArray);
而且归档的文件似乎是一个数组/列表,如果客户需要,也可以将其转换为逗号分隔的字符串-string.Join(“,”,yourArray);
Thus said, its not necessary that your api should give response exactly how the client expects; 这样说来,您的api不必给出客户端期望的准确响应即可; sometimes you have to do some extra logic with data in client side to get the work done.
有时,您必须对客户端的数据做一些额外的逻辑才能完成工作。 But in this case, i would change the api, as giving an integer value as device status doesnt make sense - but if you need that id back in case you have any update, then send an object from api, like {statusId:1, statusName: 'New Device' }.
但是在这种情况下,我会更改api,因为设备状态不提供整数值是没有意义的-但是,如果需要更新该ID,以防万一,请从api发送一个对象,例如{statusId:1, statusName:“新设备”}。 And wrt the archived items, thats a trade-off call you gotta make, that change could be done at either side, do the change which would be easier to implement.
并归档了项目,这就是您必须进行的权衡取舍,可以在任一端进行更改,进行更易于实现的更改。
Update : As per discussion OP doesnt have control over the api. 更新 :根据讨论,OP无法控制api。 Adding some code to get started with (plunker - https://plnkr.co/edit/nHLl07I0B33QMdfZoP1N?p=preview ):
添加一些入门代码(plunker- https ://plnkr.co/edit/nHLl07I0B33QMdfZoP1N ? p = preview):
var app = angular.module("MainModule", []);
app.controller("MainController", function() {
var self = this;
self.devices = []; //initially this is empty
//call your api and get the devices. Im hardcoding for now
//dummy data
self.devices = [{
"DeviceId": "00022B9A000000010001",
"StagedManifestIdList": [],
"PendingManifestId": null,
"PendingTimeStamp": "0001-01-01T00:00:00",
"ManifestIdList": [
"00000002",
"00000001",
"00000003"
],
"DeviceStatus": 3,
"Aid": "oAAABTUAAg==",
"DKiIndex": "DKi00000002",
"Sha": "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us=",
"DefaultPayload": "C:\\ProgramData\\\\Payloads\\M4PayloadAuto.xml"
}, {
"DeviceId": "00022B9A000000010001",
"StagedManifestIdList": [],
"PendingManifestId": null,
"PendingTimeStamp": "0001-01-01T00:00:00",
"ManifestIdList": [
"00000007",
"00000004",
"00000003"
],
"DeviceStatus": 1,
"Aid": "oAAABTUAAg==",
"DKiIndex": "DKi00000002",
"Sha": "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us=",
"DefaultPayload": "C:\\ProgramData\\\\Payloads\\M4PayloadAuto.xml"
}, {
"DeviceId": "00022B9A000000010001",
"StagedManifestIdList": [],
"PendingManifestId": null,
"PendingTimeStamp": "0001-01-01T00:00:00",
"ManifestIdList": [
"00000004",
"00000001",
"00000008"
],
"DeviceStatus": 3,
"Aid": "oAAABTUAAg==",
"DKiIndex": "DKi00000002",
"Sha": "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us=",
"DefaultPayload": "C:\\ProgramData\\\\Payloads\\M4PayloadAuto.xml"
}, ]
});
//add custom filter for display
app.filter('deviceStatus', function() {
var deviceStatusLookup = {
1: "New Device",
2: "Activated",
3: "Unactivated"
};
return function(statusId) {
var output = deviceStatusLookup[statusId];
return output;
}
});
HTML: HTML:
<!DOCTYPE html>
<html data-ng-app="MainModule">
<head>
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="MainController as ctrl">
<table>
<tr>
<td><strong>Device Status</strong></td>
<td><strong>Staged</strong></td>
<td><strong>Archieved</strong></td>
</tr>
<tr data-ng-repeat="device in ctrl.devices">
<td>{{::device.DeviceStatus | deviceStatus}}</td>
<td>{{::device.PendingManifestId || 'None'}}</td>
<td>{{::device.ManifestIdList.join(", ")}}</td>
</tr>
</table>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.