Reputation: 31

How to pass array as parameter to $http.get in Angularjs

Problem Statement

I have a javascript array which i want to pass as a parmeter to $http.get in AngularJs. This array will be passed to action method in MVC. what should be the syntax? Please Help me. I am stuck here. The array being passed is javascript array

Angular Directive

$scope.selectedIdArray = [];   
$scope.selectedIdArray.push({ id: $scope.selectedId })

$scope.$parent.getProjects($scope.selectedIdArray);

Angular Controller

$scope.getProjects = function (selectedIdArray) {
        $http.get('Home/GetAllProjects', { params: { "parentId[]": selectedIdArray } })
            .then(function (data) {
                    $scope.projects = [];
            angular.forEach(data.data, function (value, index) {
                $scope.projects.push({ id: value.N_LevelID, label: value.T_LevelName }
                );
            });
            })
        .catch(function (data) {
            console.error('Gists error', data.status, data.data);
        })
    }

MVC Controller Action Method

public JsonResult GetAllProjects(int?[] parentId = null)
        {
            iMetricsEntities dbcontext = new iMetricsEntities();
            JsonResult jr = new JsonResult();
            if (parentId == null)
            {
                jr.Data = dbcontext.Levels.Where(objelevel => objelevel.N_LevelTypeID == 2 && objelevel.B_Active);
                jr.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

                //return new JsonResult
                //{
                //    Data = dbcontext.Levels.Where(objelevel => objelevel.N_LevelTypeID == 2 && objelevel.B_Active),
                //    JsonRequestBehavior = JsonRequestBehavior.AllowGet
                //};
            }
            else if (parentId != null)
            {
                foreach (var id in parentId)
                {
                    jr.Data = dbcontext.Levels.Where(objelevel => objelevel.N_LevelTypeID == 2 && objelevel.B_Active && objelevel.N_ParentID == id);
                    jr.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
                }
            }

            return jr;
        }

Upvotes: 3

Answers (2)

Rafael Dowling Goodman

Reputation: 913

If you define your controller action like this:

    public JsonResult GetAllProjects(int[] parentId)
    {
        // Stuff goes here
    }

You can call it like this:

    $http.get('Home/GetAllProjects', { params: { "parentId": [1, 2, 3, 42] } })
    .then(function(response) {
        // stuff goes here
    });

The reason this works is because query strings can be specified multiple times. Both $http and MVC interpret these as arrays.

In the above example, this is the URL that gets generated by $http, which the controller action model binds to an array:

http://localhost:56976/Home/GetAllProjects?parentId=1&parentId=2&parentId=3&parentId=42

Upvotes: 4

shiv

Reputation: 393

$http(
  method: 'GET',
  url: ''Home/GetAllProjects'',
  params: {
    parentId: JSON.stringify(selectedIdArray )
  }
)

Upvotes: 1