Two way JSON Binding Example

[Chris]

Hi everyone,

I've looked around the documentation and the the tutorials, but I can
not find (or just understand), how to update a model via a restful
JSON API. I can create the service and fetch data, but I'm unclear how
to save changes back to the server. I verified that I can POST back to
the service and make updates, so I just need to figure out the Angular
magic. Any help is appreciated.

function AppController($resource) {
this.Activity = $resource(
'/rest/App/:myKey',
{get:{method:'JSON', params:{visibility:'@self'}}, replies:
{method:'JSON', params:{visibility:'@self', comments:'@comments'}}}
);
}
AppController.prototype = {
fetch: function() {
this.activities = this.Activity.get({myKey:this.myKey});
},
expandReplies: function(activity) {
activity.replies = this.Activity.replies({myKey:this.myKey});
}
};
AppController.$inject = ['$resource'];

<div ng:controller="AppController">

<input name="myKey" value="agRkZWxpcgoLEgNBcHAY6QcM"/>
<button ng:click="fetch()">fetch</button>
<hr/>
Wrapped App = {{activities}} <br>

<input name="activities.App.name">
<button ng:click="activities.save()">Save</button>
</div>

I think that the proper syntax or function for the Save button is what
I'm missing.

[Igor Minar]

Hi Chris,

Is your api on the same domain or are you making cross domain requests?

From your code it looks like you are trying to mix the two. So which one is it?

/i

--
You received this message because you are subscribed to the Google Groups "angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Chris]

The pages and rest API are on the same domain. Nothing special needed.
Just looking for the simplest way to update a restful resource.

[rur]

Hey Chris,

I built a two way JSON web service which is working really well. It
simplifies the hell out of the code at either end. Particularly when
you are making intricate updates/requests.

The way it works is that each call I make is actually done using xhr
method POST. I'm specifying the action to be performed in the json not
the url.

So action "getUserDetails" would be a call to "php/api.php" with the
POST data: { "action":"get_user_details" }

Here is my xhr code:

///////////////////// js //////
self.xhr("POST", "php/api.php",
data,
function(status, response) {
if (200 <= status && status < 300) {
// all good
} else {
// error
}
});
///////////////////

'data' is a native object, no need to turn it to a JSON string. Also
the response object that comes back will also be a native object.

That works fine and the POST data will contain raw JSON, the tricky
part is retrieving the data on the server side. Now I'm using PHP so
normally I would get POST data using $_POST['action'] however this
wont work because the post data is raw JSON not flat key-value pairs.

Here is how I retrieve the JSON POST data in php:

///////////// php ////
// reads input stream as a string
$rawrequest = file_get_contents('php://input');

$req = json_decode($rawrequest,true);
///////////////////////

$req is now a native associative array with all the structure of the
'data' object you sent to xhr. I have found this is unbelievably handy
in the app I'm building.

Here is how best to respond:

/////////////// php ///
header('Content-type: application/json');
echo json_encode($response);
exit ();
//////////////////////

Now if you're not using PHP you will have to find the equivalent of
this.

Best of luck, let me know how you get on.

rur

[Witold Szczerba]

On 29 June 2011 13:30, rur <flui...@gmail.com> wrote:
> Hey Chris,
>
> I built a two way JSON web service which is working really well. It
> simplifies the hell out of the code at either end. Particularly when
> you are making intricate updates/requests.
>
> The way it works is that each call I make is actually done using xhr
> method POST. I'm specifying the action to be performed in the json not

> the url. [...]

Looks like you are trying hard to do everything against existing
standards and common practices. Sooner or later it will turn against
you.

Regards,
Witold Szczerba

[rur]

Thanks for that Witold

I agree, but I do like the comparative simplicity JSON affords.

This was a proof of concept based upon this: http://json.org/JSONRequest.html

This approach seems particularly appropriate for Angular considering
the added sophistication enabled on the client end. Name-value pairs
don't seem up to the task to me. As I gain a better feel for it I'll
try to move this implementation towards common practices as you
suggest.

[Chris] Witold is right, if you're looking for the least hassle you're
better off following the implementation as outlined in the Angular
docs.

Regards,
rur



On Jun 29, 3:51 pm, Witold Szczerba <pljosh.m...@gmail.com> wrote: