How to return/edit REST resource with AngularJS & Restangular

miamisoftware picture miamisoftware · Jun 22, 2013 · Viewed 9.6k times · Source

Using Restangular for AngularJS, keep getting an object object from Mongolab.

I'm sure it has to do with Promise but not sure how to use/implement this coming from old Java OO experience.

(Side note, would something like Eloquent Javascript, some book or resource help me understand the 'new' Javascript style?)

The small web app is for Disabled Students and is to input/edit the students, update the time they spend after school and then output reports for their parents/caregivers every week.

Here's the code that returns undefined when popping up a new form (AngularJS Boostrap UI modal)

I personally think Restangular & the documentation is a great addition so hope it doesn't dissuade others - this is just me not knowing enough.

Thanks in advance

app.js ...

$scope.editStudent = function(id) {
    $scope.myStudent = Restangular.one("students", id);
    console.log($scope.myStudent);
}

Answer

mgonto picture mgonto · Jun 25, 2013

I'm the creator of Restangular :). Maybe I can help you a bit with this.

So, first thing you need to do is to configure the baseUrl for Restangular. For MongoLab you usually do have a base url that's similar to all of them.

Once you got that working, you need to check the format of the response:

If your response is wrapped in another object or envelope, you need to "unwrap" it in your responseExtractor. For that, check out https://github.com/mgonto/restangular#my-response-is-actually-wrapped-with-some-metadata-how-do-i-get-the-data-in-that-case

Once you got that OK, you can start doing requests.

All Restangular requests return a Promise. Angular's templates are able to handle Promises and they're able to show the promise result in the HTML. So, if the promise isn't yet solved, it shows nothing and once you get the data from the server, it's shown in the template.

If what you want to do is to edit the object you get and then do a put, in that case, you cannot work with the promise, as you need to change values.

If that's the case, you need to assign the result of the promise to a $scope variable.

For that, you can do:

Restangular.one("students", id).get().then(function(serverStudent) {
    $scope.myStudent = serverStudent;
});

This way, once the server returns the student, you'll assign this to the scope variable.

Hope this helps! Otherwise comment me here!

Also check out this example with MongoLab maybe it'll help you :)

http://plnkr.co/edit/d6yDka?p=preview