current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Yes, I know there is a gazillion posts about sending array data using angular $esource. I read this, this, and pretty much the top 10 google results on this topic, but I still can't make it work. I suspect that it might have to do with the server side API, but I am really not sure.

Please help me figure this out. I am trying to POST an array of data to the .NET API using angular $resource.

$Resouce: 

ResourceModule.service('PartProgramsResource', function ($resource) {
     var url = _baseUrl + '/parts/:partId/programs'
     return $resource(url, { partId: '@partId' }, {
         add: {method: 'POST', isArray: true}
     });

})

Inside controller: 

app.controller("EditPartCtrl", function ($scope, PartProgramsResource){
   $scope.save = function(){
      var programsToSave = ["program 1", "program2"];
      var resource = new PartProgramsResource(programsToSave);
      resource.$add({ partId: $scope.part.id });
  }
}

Debugger:

request payload

I hope I am not mistaking this, but it seems to me that my array turns into an object?? with array index as the key? or this is how array looks like in the request payload?

.NET API: 

 [HttpPost]
    [Route("{partId:int:min(1)}/programs"
        , Name = ApplicationApiRoutes.Parts.AddPartPrograms)]
    [ResponseType(typeof(IEnumerable<KeyValueOutput>))]
    public HttpResponseMessage AddPartPrograms([FromUri] int partId, [FromBody] List<string> programNames)
    {
        return Execute(() => _partFacade.AddPartPrograms(partId, programNames.ToArray(), CurrentUser));
    }

Calling the API with the above resource will cause an System.NullReferenceException error. The programNames parameter is null.

When I went through the stackoverflow posts regarding this topic, I mostly see this syntax being used: 

var resource = new PartProgramsResource();
 resource.$add({ partId: $scope.part.id }, programsToSave);

However, this never works for me and the request payload will be an empty object.

Any help will be appreciated since I am absolutely, terribly stuck....

share|improve this question
    
How about resource.$add({ partId: $scope.part.id, programNames: programsToSave }); –  devqon yesterday
    
maybe you can try with transformRequest and inside it to modify data send to server. –  Alex G yesterday
    
@devqon, that will change my uri to localhost:58248/v1/parts/109/… and still getting the null reference error. But thanks for your suggestion thou. –  anotherfoo yesterday
    
And how about resource.$add({ partId: $scope.part.id }, { programNames: programsToSave }); –  devqon yesterday
    
@AlexG, omg! Finally! You are a life saver! It will be great if you can post your comment as a answer so I can pick you as the solution. It will also be very helpful if you can explain why my array get transformed into an object during the request. –  anotherfoo yesterday

2 Answers 2

up vote 1 down vote accepted

You can modify data using transformRequest

ResourceModule.service('PartProgramsResource', function ($resource) {
    var url = _baseUrl + '/parts/:partId/programs'
    return $resource(url, { partId: '@partId' }, {
        add: {
            method: 'POST',
            transformRequest: function (data, headersGetter) {
                //modify data and return it 
                return angular.toJson(data);
            },
            isArray: true
        }
    });
})

Am not 100% sure why angular does this, but i think it expects object to be passed. so if you have send data like {myArray: [...]} this will be ok.

share|improve this answer
    
yup, this is exactly what I did. Not that I don't like your answer, but I am still a bit skeptical about this solution, since so many people suggested that adding isArray: true is the key solution, but that didn't work for me. Plus, I still don't understand why resource.$add({ }, dataToPost); doesn't actually post any data to the server and I have to do it the way I did -- var r = new Resource(dataToPost); r.$add(); –  anotherfoo yesterday
up vote 0 down vote

You put in the programNames directly as the data object, but it should be a property of the data object:

var resource = new PartProgramsResource(),
    data = {
        programNames: programsToSave
    };

resource.$add({ partId: $scope.part.id }, data);
share|improve this answer
    
I see. I guess you had a typo in your original comment. This method doesn't work as well thou. The request payload is an empty object. –  anotherfoo yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.