It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required

Question

It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required

It appears that the current website utilizes asp.net web forms calling web api, but I am looking to convert it to Angular calling Web api. One thing I have noticed is that I need to clean up the data.

How should I approach this?
Should I use conditionals in the Html?

Here is an example of the old website output:

Device Status      Staged       Archived
-----------------------------------------
   Unactivated       None        002,003,001 
   New Device        None        None

This is how my Angular/html output looks like:

Device Status      Staged       Archived
-----------------------------------------
   3                null        [002,003,001] 
   1                null        []

I need to assign meaningful Device Status to the numbers
It seems like I always need to remove [] from the data

I am thinking about handling this in Javascript... as it might be better than doing it in Html with angular.

Any thoughts on this?

What would be the best practice for accomplishing this task, regardless of whether it's done in Javascript or Html?

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

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');
           });

javascript asp.net angularjs

Answer 1

Answer №1

To achieve the desired results, make adjustments to your WebApi. It appears that the device status is an enum on the server side, so you can send back the text of the enum in the api response. As for the archived items, it seems they are stored as an array/List which can be converted into a comma-separated string for the client if necessary - using string.Join(", ", yourArray).

While it's not always possible for your api to provide responses exactly in the format expected by the client, sometimes additional logic may need to be implemented on the client side to process the data accordingly. In this case, I would recommend changing the api to return an object containing both the status id and name instead of just an integer value for device status. For the archived items, consider whether it would be easier to implement the necessary changes on the server or client side.

Update: The OP has mentioned they do not have control over the api. Below is some sample code to help get started (plunker - https://plnkr.co/edit/nHLl07I0B33QMdfZoP1N?p=preview):

// Sample AngularJS code
var app = angular.module("MainModule", []);

app.controller("MainController", function() {

  var self = this;

  // Empty devices array to start with
  self.devices = [];

  // Dummy data to simulate api call and retrieve devices
  self.devices = [{
    "DeviceId": "00022B9A000000010001",
    "StagedManifestIdList": [],
    "PendingManifestId": null,
     // More data...
  }, {
    // Next device data...
  }];

});

// Adding custom filter for displaying device status
app.filter('deviceStatus', function() {

    var deviceStatusLookup = {
      1: "New Device",
      2: "Activated",
      3: "Unactivated"
    };

    return function(statusId) {
      var output = deviceStatusLookup[statusId];
      return output;
    }
 });

HTML:

<!DOCTYPE html>
<html data-ng-app="MainModule">

  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b7b8b1a3bab7a4f8bca596e7f8e3f8ee">[email protected]</a>" 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>

Answer 2

To achieve the desired results, make adjustments to your WebApi. It appears that the device status is an enum on the server side, so you can send back the text of the enum in the api response. As for the archived items, it seems they are stored as an array/List which can be converted into a comma-separated string for the client if necessary - using string.Join(", ", yourArray).

While it's not always possible for your api to provide responses exactly in the format expected by the client, sometimes additional logic may need to be implemented on the client side to process the data accordingly. In this case, I would recommend changing the api to return an object containing both the status id and name instead of just an integer value for device status. For the archived items, consider whether it would be easier to implement the necessary changes on the server or client side.

Update: The OP has mentioned they do not have control over the api. Below is some sample code to help get started (plunker - https://plnkr.co/edit/nHLl07I0B33QMdfZoP1N?p=preview):

// Sample AngularJS code
var app = angular.module("MainModule", []);

app.controller("MainController", function() {

  var self = this;

  // Empty devices array to start with
  self.devices = [];

  // Dummy data to simulate api call and retrieve devices
  self.devices = [{
    "DeviceId": "00022B9A000000010001",
    "StagedManifestIdList": [],
    "PendingManifestId": null,
     // More data...
  }, {
    // Next device data...
  }];

});

// Adding custom filter for displaying device status
app.filter('deviceStatus', function() {

    var deviceStatusLookup = {
      1: "New Device",
      2: "Activated",
      3: "Unactivated"
    };

    return function(statusId) {
      var output = deviceStatusLookup[statusId];
      return output;
    }
 });

HTML:

<!DOCTYPE html>
<html data-ng-app="MainModule">

  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b7b8b1a3bab7a4f8bca596e7f8e3f8ee">[email protected]</a>" 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>

Answer 3

Answer №2

When receiving an array as data, it may look something like this:

[
    { status: 3, archived: [002, 003, 001] },
    { status: 1, archived: [] }
]

To display the status, you would need a lookup for descriptions:

let statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];

There are different ways to display the data. You can do simple conversions in Angular:

{{statuses[item.status]}}
{{item.archived.join(',')}}

If the requirements are more complex, it is better to convert the data before assigning it to $scope:

UPDATE

For best practices, consider setting up view functions within your controller:

// 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';
};

You can then reference these arrays and functions in your view. If needed on multiple views or if requirements become more complex, create a service with helper functions to inject into $scope when necessary.

Answer 4

When receiving an array as data, it may look something like this:

[
    { status: 3, archived: [002, 003, 001] },
    { status: 1, archived: [] }
]

To display the status, you would need a lookup for descriptions:

let statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];

There are different ways to display the data. You can do simple conversions in Angular:

{{statuses[item.status]}}
{{item.archived.join(',')}}

If the requirements are more complex, it is better to convert the data before assigning it to $scope:

UPDATE

For best practices, consider setting up view functions within your controller:

// 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';
};

You can then reference these arrays and functions in your view. If needed on multiple views or if requirements become more complex, create a service with helper functions to inject into $scope when necessary.

It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required

Answer №1

Answer №2

Similar questions

The initial attribute unattainable for entities processed by csv-parse

Get rid of all numbers from a jQuery selection except for the first and last

What is the mechanism by which HttpContext is aware of a User's Roles?

What is the best way to insert a PDF into an asp.net webpage?

Is it possible to stop an AjaxBehaviorEvent listener or send extra information to the f:ajax onevent function?

experimenting with a controller that includes $scope.$on functionality

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

Every item in my array is replaced by the most recently added element

Ways to encounter the "10 $digest() iterations reached. Aborting" issue in Jasmine

Attempting to convert a Raw image file and upload it onto the server

iphone app for transferring data securely between clients and servers

Is there a way to personalize the validation message for a username already in use in Asp.net Identity 2

Detect issues using AngularJS and Restangular

Front end authentication failed (Angular/Spring stack)

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

Conceal a list of items within a div that has a particular class

How to Retrieve Correct JSON Data from Mongoose Query in Node.js

What could be causing the npm install command to not save packages in the /node_modules directory?

Having trouble resolving all parameters for AuthService in Angular

Troubaling with AngularJS Routing issues