Passing and retrieving complex objects from Angularjs to Web Api

Question

I have a form in angular where a user enters various criteria which I then want to pass to Web Api and get a result after queries are run. I originally thought of this as a "Get" but had trouble passing complex objects to the Web Api. With some advice, I then used a Post and was able to pass the criteria run the query in the Web Api but I had trouble getting the result back in Angular. The Web Api method is run and gets the results. But I don't see the results in the data service.

What is the best approach where the criteria for a query is multiple fields and some are lists? I haven't been able to find any good examples.

Here is the Web Api method:

[HttpPost] public IEnumerable Post([FromBody] FrequentPawnerReportCriteria criteria) { var repo = new FrequentPawnerReport(); var result = repo.GetReport(criteria); return result; }`

Here is the dataservice:

function getFrequentPawner(criteria) {
            return $http.post("/api/FrequentPawner/Post", criteria)
                .then (getFrequentPawnerComplete)
                .catch(getFrequentPawnerFailed);
            function getFrequentPawnerComplete(response) {
                var x = response
                return response.data.results;
            }
            function getFrequentPawnerFailed(error) {
                alert("XHR failed for frequent pawner report: " + error.responseText);
            }
        }

And here is the controller code:

function getTopPawnerResults(criteria) {

            return DataContext.getFrequentPawner(criteria)
                .then(
                function (result) {
                    vm.frequentPawnerReport = result.data;

                    return vm.frequentPawnerReport;
                });
        }

Please show the code outlining what you have tried so far. Users will be far more likely to help you if you add code for clarity. — buzzsaw
– buzzsaw, Commented Oct 17, 2015 at 17:10
using post or get should not be based on "I originally thought of this as a "Get" but had trouble passing complex objects to the Web Api" — bto.rdz
– bto.rdz, Commented Oct 17, 2015 at 17:11
Really not clear what the specific problem is. Response from server shouldn't be an issue with either get or post — charlietfl
– charlietfl, Commented Oct 17, 2015 at 17:17

Sanjay Verma · Accepted Answer · 2015-10-17 19:16:37Z

0

Simply use JSON. Use JSON.stringify() to parse JSON object to string and POST it. Similarly, return JSON string from server, and assign it to variable in Angular. It will be automatically converted to JSON object.

answered Oct 17, 2015 at 19:16

Sanjay Verma

1,67626 silver badges46 bronze badges

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

Comments

dimaj · Accepted Answer · 2015-10-17 19:18:33Z

I think when you make your post request, you need to have a callback function that would get invoked when your Web Api returns. Within that callback function you can update your $scope variables which will make your web ui show the response from the server. You can find an example of what I mean here: https://docs.angularjs.org/api/ng/service/$http

The gist of it: $http({ method: 'POST', url: '/path/to/your/web/api', function(success) { console.log('Successfully executed the api call'); $scope.response = response; // change this to match the data you are expecting from the server response }, function(failure) { console.error('There was an error'); $scope.failure = failure; // change this to match your failure response } );

rsalit · Accepted Answer · 2015-10-24 16:53:05Z

0

Thanks for responding. The project is a mix of web forms and angularjs. I am migrating the app and didn't notice this form had a conflict which was causing a post back and making it look like the result was not being returned. I took the form into a separate project and was able to get the results I was going for.

answered Oct 24, 2015 at 16:53

rsalit

911 silver badge6 bronze badges

Collectives™ on Stack Overflow

Passing and retrieving complex objects from Angularjs to Web Api

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related