Angular JS Sending Array data with $resource to .NET API

Question

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 Stack Overflow 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....

How about resource.$add({ partId: $scope.part.id, programNames: programsToSave }); — devqon
– devqon, Commented Jun 12, 2015 at 10:38
maybe you can try with transformRequest and inside it to modify data send to server. — Aleksandar Gajic
– Aleksandar Gajic, Commented Jun 12, 2015 at 10:46
@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. — Tina Chen
– Tina Chen, Commented Jun 12, 2015 at 10:54
And how about resource.$add({ partId: $scope.part.id }, { programNames: programsToSave }); — devqon
– devqon, Commented Jun 12, 2015 at 10:57
@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. — Tina Chen
– Tina Chen, Commented Jun 12, 2015 at 11:14

Aleksandar Gajic · Accepted Answer · 2015-06-12 11:25:17Z

2

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.

answered Jun 12, 2015 at 11:25

Aleksandar Gajic

1,3591 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tina Chen Over a year ago

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();

devqon · Accepted Answer · 2015-06-12 11:11:47Z

0

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

answered Jun 12, 2015 at 11:11

devqon

14k2 gold badges32 silver badges46 bronze badges

1 Comment

Tina Chen Over a year ago

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.

Collectives™ on Stack Overflow

Angular JS Sending Array data with $resource to .NET API

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related