I am having difficulty accessing the returned JSON response data from the new Facebook JS SDK new Graph API calls.
For instance, in some of their docs where they are using the old way of using the SDK , they get a pointer to the data by response[0]
but here, it's showing that you need to use response.data[0] instead: http://developers.facebook.com/tools/console/ (click on fb.api — photo-albums)
So which is it? I know that with my code below, if I try using response[0] type of syntax to get at the returned JSON I get undefined.
If I use response[0].length I also get undefined
But if I try response.data[0].length I get 2 which I guess is the returned JSON or my 2 albums..I just don't know how to play with this returned object in terms of syntax and manipulating it, its properties, etc.
I want to in the end parse out the returned JSON using the jQuery parseJSON method but have no clue how to even pass the right syntax here for the response and just use that response object.
FB.api(uri, function(response)
{
alert("response: " + response);
// check for a valid response
if (response == "undefined" || response == null || !response || response.error)
{
alert("error occured");
return;
}
alert("response length: " + response.data.length);
}
this alert gave me 2 which makes sense. I have 2 albums.
then I tried something like response.data[0] and tried a jQuery parseJSON(response.data) or parseJSON(response.data[0]) on that and it does not work. So can someone explain the response object here as in regards to Facebook I guess? I see no docs about how to use that returned object at all and how it's constructed.
UPDATED:
Ok, so here's the entire parsing method attempt that I've stubbed out so far. I don't know if the jQuery parsing is 100% good code yet, I sort of stubbed that out but I can't even test that until I figure out how to use this response object coming back. I know it is returning JSON because I parsed another facebook response object in another method in the JS SDK so pretty sure that response[0] or response.data[0] will give you the JSON string.
function GetAllFacebookAlbums(userID, accessToken)
{
alert("inside GetAllFacebookAlbums(userID, acessToken)");
var dFacebookAlbums = {}; // dictionary
var uri = "/" + userID + "/albums?access_token=" + accessToken;
//var uri = "/me/albums";
alert("get albums uri: " + uri);
FB.api(uri, function(response)
{
alert("response: " + response);
// check for a valid response
if (response == "undefined" || response == null || !response || response.error)
{
alert("error occured");
return;
}
alert("response length: " + response.data.length);
for (var i=0, l=response.data.length; i<l; i++)
{
alert("response[key]: " + response.data[i].Name);
}
// parse JSON from response
var dJSONObjects = jQuery.parseJSON(response.data);
alert("dJSONObjects: " + dJSONObjects);
if (dJSONObjects.length == 0)
return;
// iterate through the dictionary of returned JSON objects
// and transform each to a custom facebookAlbum object
// then add each new FacebookAlbum to the final dictionary
// that will return a set of facebookAlbums
$.each(json.attributes, function () {
// add a new album to the dictionary
aFacebookAlbums[i] = FacebookAlbum(
jsonObject["id"],
jsonObject["name"],
jsonObject["location"],
jsonObject["count"],
jsonObject["link"]
);
});
});
return dFacebookAlbums;
}
It depends on the API being used. For the new Graph API single objects come back as top level object: http://graph.facebook.com/naitik -- where as collections come back with a top level data property which is an Array: http://graph.facebook.com/zuck/feed. There's also introspection to make things somewhat easier: http://developers.facebook.com/docs/api#introspection. FQL is the other popular API call, and this is where the top level response is array (think rows in SQL) which is why some examples use response[0]. Easiest thing is to just look at the response in your browser or via curl and see what it looks like.
just to clarify for all you folks who are new to FB.api (as I am) graph queries return different shaped data ... here are two examples:
FB.api('me/' function(returnData) { } ) would put the following data into returnData
{
"id": "592529630",
"name": "Hugh Abbott",
"first_name": "Hugh",
"last_name": "Abbott",
}
then if I said returnData.first_name I would get "Hugh"
If however my query was about my friends, I might run the following query
FB.api('me/friends/' function(returnData) { } )
And the shape of my data is now different:
"data": [
{
"name": "Tom Bell",
"id": "36801805"
},
{
"name": "Michael Royce",
"id": "199712888"
},
]
... so returnData is now a array ... in order to retrieve values, I would do something like the following.
returnData.data[0].name this would return "Tom Bell"
I hope this helps, as I spent a few hours wondering where I had gone wrong ... it turns out, it is all in the shape of the data !!!! good luck my friends.
Hugh
In general, the JS SDK doesn't return JSON object but it returns an object which is structured similar to the JSON Object.
Say for example : One is polling for user events data and according to the GRAPH API reference (http://developers.facebook.com/docs/reference/api/event), the returned data will have attributes as given http://developers.facebook.com/docs/reference/api/event.
The JSON object for the events data would be like this if you are using PHP SDK
Array ( [data] => Array ( [0] => Array ( [name] => sample event [start_time] => 2010-08-09T22:00:00+0000 [end_time] => 2010-08-10T01:00:00+0000 [location] => at office\ [id] => xxxxxxxx [rsvp_status] => attending )) [paging] => Array ( [previous] => hyperlink [next] => hyperlink ) )
But if you are using JS SDK, then the returned response will be like this
response.data[0...n].attributes of the particular table which you are accessing.
So, in the case of event table it will be like this :
response.data[0...n].name or response.data[0...n].id, response.data[0...n].end_time, etc
Did this ever get figured out. No one accepted anything.
alert("response[key]: " + response.data[i].Name);
The above code has Name and not name. Also, as Matti pointed out above, this works:
response.data[0].name
Just my two cents. #CoffeeAddict, accept answers to show some appreciation... Seems like someone with you rep would appreciate that. :o)
I haven't looked at the API, but I doubt FB would give you JSON encoded strings in an array. Have you tried just accessing response.data[0].someproperty?
If there is no error, then response.data should be the stuff you want (this will be an array in most cases) if you are using the new graph api. You could always just alert the JSON string if you are unsure what you are getting back.
I'm sure this must not be an issue anymore considering the Graph API explorer clearly displays the data in the form that it is returned. You are right about the difference in structure of the responses, but personally it has been useful to see what data is returned using the explorer and use the syntax accordingly.
Related
I am trying to get my webhook to return a parsed JSON response from an API. I can log it on the console, but when I try to use app.tell; it gives me: TypeError: Cannot read property 'tell' of undefined. I am basically able to successfully get the data from the API, but I'm not able to use it in a response for some reason. Thanks for the help!
[Actions.API_TRY] () {
var request = http.get(url2, function (response) {
// data is streamed in chunks from the server
// so we have to handle the "data" event
var buffer = "",
data,
route;
response.on("data", function (chunk) {
buffer += chunk;
});
response.on("end", function (err) {
// finished transferring data
// dump the raw data
console.log(buffer);
console.log("\n");
data = JSON.parse(buffer);
route = data.routes[0];
// extract the distance and time
console.log("Walking Distance: " + route.legs[0].distance.text);
console.log("Time: " + route.legs[0].duration.text);
this.app.tell(route.legs[0].distance.text);
});
});
}
This looks to me to be more of a JavaScript scoping issue than anything else. The error message is telling you that app is undefined. Often in Actions, you find code like yours embedded in a function which is defined inside the intent handler which is passed the instance of your Actions app (SDK or Dialog Flow).
I'm pretty new using vertx framework, and in the documentation I cannot see the silly thing about how to send two parameters in a GET request. So far I tried this.
$.getJSON('/user/'+ attributeName + ":"+value, function (data) {
userListData = data;
$.each(data, function () {
$('#userInfoName').text(data.fullname);
$('#userInfoAge').text(data.age);
$('#userInfoGender').text(data.gender);
$('#userInfoLocation').text(data.location);
});
});
And then in server side
router.get("/user/:attributeName:value").handler(routingContext -> {
JsonObject query = new JsonObject();
query.put(routingContext.request().getParam("attributeName"), routingContext.request().getParam("value"));
But then I can see how attributeName not only gets the value of the first param but part of the second, very weird.
You're probably doing it wrong. You can get it as a single param and later split with ":" or have two parameters defined in the url as... /:attribname/:value/...
Both will handle your requirement
I'm a noob to JSON, and would like to do a foreach through all the variables that are given to the callback after a user of my Facebook application invites many users to it, using Requests 2.0
According to Facebook, this is the callback that is received.
{
"request_ids": [
0: "[request_id]",
1: "[request_id]"
]
}
When I try to validate that with JSON Lint, it comes up as invalid. That doesn't help me at all. I understand that the JSON is stored in a variable called response. You can look that up here.
I want to do a foreach of all the request id's so that it'll go something like this. Damn I don't know how to do for/foreach loops in javascript.
for (response["*"] key in response){
document.write("ajaxcontrols.php?createSlapAction=REQUEST_ID");
}
Do a loop like this:
for(var i = 0; i < response.request_ids.length; i++) {
alert("Invitation ID: " + response.request_ids[i]);
}
I'm using backbone.js to interact with a REST API that, when posting to it to create a new resource, responds with a status of 201, a 'Location' header pointing to the resource's URI, but an empty body.
When I create a new model at the moment, its successful, but the local representation of the model only contains the properties I explicitly set, not any of the properties that would be set on the server (created_date, etc.)
From what I understand, Backbone would update its representation of the model with data in the body, if there were any. But, since there isn't, it doesn't.
So, clearly, I need to use the location in the Location header to update the model, but what's the best way to do this.
My current mindset is that I would have to parse the url from the header, split out the id, set the id for the model, then tell the model to fetch().
This seems really messy. Is there a cleaner way to do it?
I have some influence over the API. Is the best solution to try to get the API author to return the new model as the body of the response (keeping the 201 and the location header as well)?
Thanks!
Sounds like you will have to do a little customization.
Perhaps override the parse method and url method of your model class inherited from
Backbone.Model.
The inherited functions are:
url : function() {
var base = getUrl(this.collection);
if (this.isNew()) return base;
return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
},
parse : function(resp) {
return resp;
},
and you could try something like:
parse: function(resp, xhr) {
this._url = xhr.getResponseHeader('location')
return resp
}
url: function() {
return this._url
}
Yes, backbone.js really wants the result of a save (be it PUT or POST) to be a parseable body which can be used to update the model. If, as you say, you have influence over the API, you should see if you can arrange for the content body to contain the resource attributes.
As you point out, its makes little sense to make a second over-the-wire call to fully materialize the model.
It may be that a status code of 200 is more appropriate. Purists may believe that a 201 status code implies only a location is returned and not the entity. Clearly, that doesn't make sense in this case.
With Backbone 0.9.9, I couldn't get the accepted answer to work. The signature of the parse function seems to have changed in an older version, and the xhr object is no longer available in the function signature.
This is an example of what I did, to make it work with Backbone v0.9.9 and jQuery 1.8.3 (using a Deferred Object/Promise), relying on the jqXHR object returned by Backbone.Model.save() :
window.CompanyView = Backbone.View.extend({
// ... omitted other functions...
// Invoked on a form submit
createCompany: function(event) {
event.preventDefault();
// Store a reference to the model for use in the promise
var model = this.model;
// Backbone.Model.save returns a jqXHR object
var xhr = model.save();
xhr.done(function(resp, status, xhr) {
if (!model.get("id") && status == "success" && xhr.status == 201) {
var location = xhr.getResponseHeader("location");
if (location) {
// The REST API sends back a Location header of format http://foo/rest/companys/id
// Split and obtain the last fragment
var fragments = location.split("/");
var id = fragments[fragments.length - 1];
// Set the id attribute of the Backbone model. This also updates the id property
model.set("id", id);
app.navigate('companys/' + model.id, {trigger: true});
}
}
});
}
});
I did not use the success callback that could be specified in the options hash provided to the Backbone.Model.save function, since that callback is invoked before the XHR response is received. That is, it is pointless to store a reference to the jqXHR object and use it in the success callback, since the jqXHR would not contain any response headers (yet) when the callback is invoked.
Another other to solve this would be to write a custom Backbone.sync implementation, but I didn't prefer this approach.
I am building a REST API for my project. The API for getting a given user's INFO is:
api.com/users/[USER-ID]
I would like to also allow the client to pass in a list of user IDs. How can I construct the API so that it is RESTful and takes in a list of user ID's?
If you are passing all your parameters on the URL, then probably comma separated values would be the best choice. Then you would have an URL template like the following:
api.com/users?id=id1,id2,id3,id4,id5
api.com/users?id=id1,id2,id3,id4,id5
api.com/users?ids[]=id1&ids[]=id2&ids[]=id3&ids[]=id4&ids[]=id5
IMO, above calls does not looks RESTful, however these are quick and efficient workaround (y). But length of the URL is limited by webserver, eg tomcat.
RESTful attempt:
POST http://example.com/api/batchtask
[
{
method : "GET",
headers : [..],
url : "/users/id1"
},
{
method : "GET",
headers : [..],
url : "/users/id2"
}
]
Server will reply URI of newly created batchtask resource.
201 Created
Location: "http://example.com/api/batchtask/1254"
Now client can fetch batch response or task progress by polling
GET http://example.com/api/batchtask/1254
This is how others attempted to solve this issue:
Google Drive
Facebook
Microsoft
Subbu Allamaraju
I find another way of doing the same thing by using #PathParam. Here is the code sample.
#GET
#Path("data/xml/{Ids}")
#Produces("application/xml")
public Object getData(#PathParam("zrssIds") String Ids)
{
System.out.println("zrssIds = " + Ids);
//Here you need to use String tokenizer to make the array from the string.
}
Call the service by using following url.
http://localhost:8080/MyServices/resources/cm/data/xml/12,13,56,76
where
http://localhost:8080/[War File Name]/[Servlet Mapping]/[Class Path]/data/xml/12,13,56,76
As much as I prefer this approach:-
api.com/users?id=id1,id2,id3,id4,id5
The correct way is
api.com/users?ids[]=id1&ids[]=id2&ids[]=id3&ids[]=id4&ids[]=id5
or
api.com/users?ids=id1&ids=id2&ids=id3&ids=id4&ids=id5
This is how rack does it. This is how php does it. This is how node does it as well...
There seems to be a few ways to achieve this. I'd like to offer how I solve it:
GET /users/<id>[,id,...]
It does have limitation on the amount of ids that can be specified because of URI-length limits - which I find a good thing as to avoid abuse of the endpoint.
I prefer to use path parameters for IDs and keep querystring params dedicated to filters. It maintains RESTful-ness by ensuring the document responding at the URI can still be considered a resource and could still be cached (although there are some hoops to jump to cache it effectively).
I'm interested in comments in my hunt for the ideal solution to this form :)
You can build a Rest API or a restful project using ASP.NET MVC and return data as a JSON.
An example controller function would be:
public JsonpResult GetUsers(string userIds)
{
var values = JsonConvert.DeserializeObject<List<int>>(userIds);
var users = _userRepository.GetAllUsersByIds(userIds);
var collection = users.Select(user => new { id = user.Id, fullname = user.FirstName +" "+ user.LastName });
var result = new { users = collection };
return this.Jsonp(result);
}
public IQueryable<User> GetAllUsersByIds(List<int> ids)
{
return _db.Users.Where(c=> ids.Contains(c.Id));
}
Then you just call the GetUsers function via a regular AJAX function supplying the array of Ids(in this case I am using jQuery stringify to send the array as string and dematerialize it back in the controller but you can just send the array of ints and receive it as an array of int's in the controller). I've build an entire Restful API using ASP.NET MVC that returns the data as cross domain json and that can be used from any app. That of course if you can use ASP.NET MVC.
function GetUsers()
{
var link = '<%= ResolveUrl("~")%>users?callback=?';
var userIds = [];
$('#multiselect :selected').each(function (i, selected) {
userIds[i] = $(selected).val();
});
$.ajax({
url: link,
traditional: true,
data: { 'userIds': JSON.stringify(userIds) },
dataType: "jsonp",
jsonpCallback: "refreshUsers"
});
}