passing Array data dynamically in URL to call webapi method (C#)

Question

below is my json generated data from the backend

{"langs":[{"cisAreaId":100,"area":"Prog","name":"C#"},{"cisAreaId":110,"area":"Prog","name":"Java"},{"cisAreaId":120,"area":"Prog","name":"MS.NET languages(VB.NET,etc)"},{"cisAreaId":130,"area":"Prog","name":"MS Visual Languages (VB, C++, etc)"},{"cisAreaId":140,"area":"Prog","name":"Python"},{"cisAreaId":150,"area":"Prog","name":"Ruby"}]}

above data i copied to $scope.areas. Now in my view

<div ng-repeat="lang in areas.langs">
 <label><input type="checkbox" ng-model="lang.selected" value="{{lang.cisAreaId}}" /> {{lang.name}}</label>
 </div>

once user click the submit, I need to capture selected checkbox values and send it as JSON data.

 $scope.languageArray = [];
 angular.forEach($scope.areas.langs, function (lang) {
 if (lang.selected) $scope.languageArray.push({ "cisAreaId": lang.cisAreaId });
 });
 var data = JSON.stringify({
 languages: $scope.languageArray,
 });

it is forming the array like after selecting the two of the checkbox values

{"languages":[{"cisAreaId":110},{"cisAreaId":120}]}

From the above code how can I pass the above dynamic array in the URL to call the backend method

Angularjs Controller Code: 
XXXService.step2Form(data).then(function (results) {
 console.log(results.data); 
 }, function (error) {
 alert(error.data.message);
 });
service code:
var _step2Form = function (data) {
 return $http.post(serviceBase + 'api/feedback/Step2Data' + data , { headers: { 'Content-Type': 'application/json' } });
 };

I have pass the data dynamically to the backend

public HttpResponseMessage Step2Data([FromBody] int[] languages)

but i am getting the error like this

http://localhost:53401/api/XXXX/Step2Data[object%20Object],[object%20Object] 404 (Not Found)

can anyone please tell me how to pass the array values dynamically in the url to call the webapi method.

• Jeroen Vannevel: You're passing it in via the url, not the body. Also, get rid of the complex object structure and just use an array of ids.
• pavany: I tried pushing the id only, but the result will be [130,140] and the error URL is localhost:53401/api/XXXXX/Step2Data130,140 404 (Not Found). I changed the method parameters in the backend as well public HttpResponseMessage Step2Data([From Body] List<int> languages) and also removing the [FomBody] also.

Answer 1

in $scope.languageArray you need to push just the id :

$scope.languageArray = [];
angular.forEach($scope.areas.langs, function (lang) {
 if (lang.selected) $scope.languageArray.push(lang.cisAreaId);
});
var data = JSON.stringify({
 languages: $scope.languageArray,
});

• Mustapha Larhrouch: try to replace [FromBody] int[] languages by [FromBody] List<int> languages
• pavany: I tried pushing the id only, but the result will be [130,140] and the error URL is localhost:53401/api/XXXXX/Step2Data130,140 404 (Not Found). I changed the method parameters in the backend as well public HttpResponseMessage Step2Data([From Body] List<int> languages)
• Mustapha Larhrouch: add an [HttpPost] to your action : [HttpPost] public HttpResponseMessage Step2Data([FromBody] int[] languages)
• pavany: Yes I added already [HttpPost] public HttpResponseMessage Step2Data([FromBody] List<int> languages) I guess there is something we need to change in the URL part.
• Mustapha Larhrouch: Yes. Replace + with , : $http.post(serviceBase + 'api/feedback/Step2Data , data...