Pass an array of data from an AngularJS application to a WebAPI endpoint, then retrieve and process that

Question

Pass an array of data from an AngularJS application to a WebAPI endpoint, then retrieve and process that

Imagine having an array within the client-side model:

        vm.dataSheets = [
        { value: 0, text: localize.getLocalizedString('_ProductsAndServices_'), selected: selected},
        { value: 1, text: localize.getLocalizedString('_Holidays_'), selected: selected },
        { value: 2, text: localize.getLocalizedString('_Locations_'), selected: selected },
        { value: 3, text: localize.getLocalizedString('_OpHours_'), selected: selected },
        { value: 4, text: localize.getLocalizedString('_Users_'), selected: selected }
    ];

This array is connected to a checkbox list in the HTML. The goal is to send the values of the checked items to the web API. By using angularJS, you can filter the selected objects like this:

$filter('filter')(vm.dataSheets, { selected: true })

Instead of getting the entire object array, is there a quicker way to just retrieve the selected values as 1, 2, 3, etc...?

Currently, the data is sent to the Web API as shown below:

  var fd = new FormData();
        fd.append('file', file);
        fd.append('clientId', $rootScope.appData.clientId);
        fd.append('sheets', $filter('filter')(vm.dataSheets, { selected: true }));

        $http.post("TIUSP/systemengine/ClientSupply", fd, {
            withCredentials: true,
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        }).success(function () {

        }

How can the selected values be retrieved in the web API? When using

HttpContext.Current.Request["sheets"];

a string such as [object, object][object, object] is returned.

javascript arrays asp.net-web-api

Answer 1

Answer №1

If you want to retrieve the chosen values as an array with IDs, you can implement a customized filter:

app.filter('selected', function() {
  return function(items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item.selected === true) {
        filtered.push(item.id);
      }
    }
    return filtered;
  };
});

Then, apply it like this:

var fd = {
    'file': file,
    'clientId': $rootScope.appData.clientId,
    'sheets': $filter('selected')(foo.results)
};

    $http.post("TIUSP/systemengine/ClientSupply", fd, {
       withCredentials: true,
       headers: {'Content-Type': undefined },
       transformRequest: angular.identity
    }).success(function () {    
}

This will generate a result similar to this:

{
   file: 'path-to-my-filez/image.png',
   clientId: 11,
   sheets: [1,2,3,4]
}

In your Web API Controller

Construct a class that corresponds to the parameters being transmitted in your request:

public class ClientSupplyViewModel
{
    public string file {get; set;}
    public int clientId [get; set;}
    public int[] sheets {get; set;}
}

Next, utilize it within your controller:

[HttpPost]
public HttpResponseMessage ClientSupply(ClientSupplyViewModel data)
{

}

The controller mentioned above is just a sample. The crucial aspect is the data parameter containing your File, ClientId, and the integer array.

Answer 2

If you want to retrieve the chosen values as an array with IDs, you can implement a customized filter:

app.filter('selected', function() {
  return function(items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item.selected === true) {
        filtered.push(item.id);
      }
    }
    return filtered;
  };
});

Then, apply it like this:

var fd = {
    'file': file,
    'clientId': $rootScope.appData.clientId,
    'sheets': $filter('selected')(foo.results)
};

    $http.post("TIUSP/systemengine/ClientSupply", fd, {
       withCredentials: true,
       headers: {'Content-Type': undefined },
       transformRequest: angular.identity
    }).success(function () {    
}

This will generate a result similar to this:

{
   file: 'path-to-my-filez/image.png',
   clientId: 11,
   sheets: [1,2,3,4]
}

In your Web API Controller

Construct a class that corresponds to the parameters being transmitted in your request:

public class ClientSupplyViewModel
{
    public string file {get; set;}
    public int clientId [get; set;}
    public int[] sheets {get; set;}
}

Next, utilize it within your controller:

[HttpPost]
public HttpResponseMessage ClientSupply(ClientSupplyViewModel data)
{

}

The controller mentioned above is just a sample. The crucial aspect is the data parameter containing your File, ClientId, and the integer array.

Pass an array of data from an AngularJS application to a WebAPI endpoint, then retrieve and process that

Answer №1

Similar questions

The data returned by axios is not equivalent to the parsed JSON response from the request

What is the method for adding 24 hours to a 12-hour timestamp while preserving the AM and PM designation?

Calculating the minimum, maximum, and average values from the set of five entered numbers

What could be causing my AJAX code to fail in retrieving information from an API?

Benefits of Using Slice Over Arrays in GO

Issue with Material UI React JS Select component: Unable to deselect multiple values when more than one item is selected

Need to include files within an electron / express application

Sequelize querying using the `WHERE NOT EXISTS()` condition

The custom modal does not seem to be compatible with the CSS3 animation library,

Encountering a ReferenceError while attempting to implement logic on a newly created page

Converting ByteBuffer to String in iReport: A How-To Guide

The display of data attributes is not being rendered correctly

Leveraging jQuery to establish headers in an ajax request

Is it possible to translate the IIFE functions of threejs into ES6 format?

What is the difference between using "src" in a script tag to reference a resource on the local filesystem versus a non-local filesystem?

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

Determine the closest parent using jQuery

How to eliminate query strings from the current page's URL using JavaScript

Learn the process of showcasing database content on a webpage with an interactive feature that enables users to choose and access additional details

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?