We Keep Coding

Calling a Facebook batch call using Appcelerator Module.Facebook

I spend about 2 hrs looking to do a batch call using Appcelerator Module.Facebook. I needed to get the Profile name and Picture. And I thought I wanted to do this in one HTTP request instead of two.
After a deep dive i finally found a way to do. I will post my answer in the answer section below.
Incase anyone else comes up against this..

var fb = require('facebook');
var log = require("log");
...
// After logging in
// gets user profile image and name uses a batch method example
function getUserInfo(userId) {
var batch = 'batch=[{"method":"GET", "relative_url":"me"},{"method":"GET", "relative_url":"me/picture"}]&access_token=' + fb.getAccessToken();
var url = "https://graph.facebook.com?" + batch;
var client = Ti.Network.createHTTPClient({
// function called when the response data is available
onload : function(e) {
log.args(this.responseText);
},
// function called when an error occurs, including a timeout
onerror : function(e) {
log.args(e.error);
},
timeout : 5000 // in milliseconds
});
// Prepare the connection.
client.open("POST", url);
// Send the request.
client.send();
}
This is how you would do a batch call using AppC, however there is a better way to get the info that i needed. In my case I only needed the Facebook name and picture
function getGraphPath(userId) {
fb.requestWithGraphPath('me?fields=id,name,picture', {}, 'GET', function(e) {
if (e.success) {
log.args('Modules.Facebook.requestWithGraphPath', JSON.parse(e.result));
} else if (e.error) {
log.args(e.error);
} else {
log.args('Unknown response');
}
});
}

Exposing data from Angular's http get reuqest's private scope

I am an angular novice and am working on an app that gets data from an accounting software and visualises different things using google charts.
Since the api of the accounting software doesn't give me the data the way I need it I have to process it before passing it to the google charts api.
No the problem I ran into is that I can't access the data that is returned inside of the http get request function due to scope I guess. I have tried quite a few things, but nothing seems to work. I feel like there should be an obvious solution to this, but can't put my finger on it.
Would be great if someone can help me with a method to expose http request data to make it usable outside of the http function itself.
Here is a code example:
myApp.controller("dataFetch", ['$http', '$scope',function($http, $scope){
var self = this;
self.project = {};
self.TSproject;
self.TShours;
//PASSING AUTHORIZATION
var config = { headers: { 'Authorization': 'Bearer 1lFASlwgM3QwSyZfJVJPO6776X5wlZtogdg8RN-Lt',} };
//GET DATA
$http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {
//SAVING PROJECT DATA
self.project = {
name: response.data.project.name,
url: response.data.project.url
};
return self.project.url;
}, function(errResponse) {
console.error("Get project request failed");
}).then(function(pUrl) {
return
$http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
self.TSproject = response.data.timeslips[0].project;
self.TShours = response.data.timeslips[0].hours;
});
});
//GOOGLE CHARTS
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn("string","User")
$scope.data1.dataTable.addColumn("number","Qty")
//INSERTING DATA FROM SERVER HERE
$scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
$scope.data1.title="Daniels Timeslips";
}]);
Thanks a lot!

The problem with your code is that you're trying to initialize your charts even before your GET call is complete.
Even though it looks like $http.get() comes first in your code, it's an Asynchronous operation, so JS interpreter will not wait for that call to complete. It will simply fire the AJAX call using $http.get() and continue with the remaining statements in code i.e Google Charts initialization in your case.
When the response is available, we have promises to be invoked after completion of your AJAX call and that is where you're ideally supposed to initialize your charts as they're dependent on that AJAX call response.
Having said that, you can make this work by simply moving your charts initialization to the callback of your second GET request like below.
$http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {
// removing your code for brewity
}, function(errResponse) {
console.error("Get project request failed");
}).then(function(pUrl) {
$http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
self.TSproject = response.data.timeslips[0].project;
self.TShours = response.data.timeslips[0].hours;
//GOOGLE CHARTS
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn("string","User")
$scope.data1.dataTable.addColumn("number","Qty")
//INSERTING DATA FROM SERVER HERE
$scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
$scope.data1.title="Daniels Timeslips";
});
});

I think you should create the google chart object inside the last http promise.
//GET DATA
$http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {
//SAVING PROJECT DATA
self.project = {
name: response.data.project.name,
url: response.data.project.url
};
return self.project.url;
}, function(errResponse) {
console.error("Get project request failed");
}).then(function(pUrl) {
return
$http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
self.TSproject = response.data.timeslips[0].project;
self.TShours = response.data.timeslips[0].hours;
//GOOGLE CHARTS
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn("string","User")
$scope.data1.dataTable.addColumn("number","Qty")
//INSERTING DATA FROM SERVER HERE
$scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
$scope.data1.title="Daniels Timeslips";
});
});
Now you should be able to access in your template {{ data1 }} with all the info.

JavaScript static function in callback

Hi I've been trying to clarify this but there's something I'm still confused about. I know that you can't return values from asynchronous functions so I've referenced this answer's top answer Returning value from asynchronous JavaScript method?
What I'm trying to do is use the flickrAPI to get the biggest size image. The flickrAPI allows one to search images, so I use this to get the photo_id, then I use this photo_id to procses another request to the API's getSize method to get the URL for the biggest size photo.
The code looks a little messy as it is, because I have a method called flickrRequest which sends an XMLHttp request and gets back a JSON string. I know that I can achieve what I want by writing the functions as follows:
function flickRQforimage() {
...got ID
function flickrRQforSize() {
...got maxsizeURL
create image based on maxsizeURL here
}
}
but I was wondering if it was possible to do something like this
function flickRQforimage() {
...got ID
function flickrRQforSize() {
...got maxsizeURL
}
create image based on maxsizeURL here
}
or even create image based on maxsizeURL here
In general my question is whether it is possible to have a callback function that references another statically defined function (I think?). The specifics of the my function is that it takes a callback and the ID and URL processing happens in those callbacks:
flickrRQ(options, cb)
I am wondering whether/what would happen if that unnamed function is instead something else, say flickrRQ(options, processPhoto(data)), and then I define the function in a separate method. This just makes sense for me because I want to keep functionality for the URL processing separate in an attempt to make my code cleaner and more readable.
I tried the following below and it didn't work. Nothing prints. I even have a console.log in the processPhoto method. In fact anything inside of the flickrRQforSize method seems to not evaluate
flickrRQforSize(options, function(data) {
processPhoto(data)
}
even though in the flickrRQforSize definition, a callback function is taken as an argument. I'm suspecting there must be something about functions/async calls that I don't understand.
I hope this is clear -- if not, I can post my actual code.
Here's my code:
var flickrRequest = function(options, xhrRQ, cb) {
var url, xhr, item, first;
url = "https://api.flickr.com/services/rest/";
first = true;
for (item in options) {
if (options.hasOwnProperty(item)) {
url += (first ? "?" : "&") + item + "=" + options[item];
//parses to search equest;
first = false;
}
}
//XMLHttpRQ to flickr
if(xhrRQ == 1 ) {
xhr = new XMLHttpRequest();
xhr.onload = function() { cb(this.response); };
xhr.open('get', url, true);
xhr.send();
};
}
var processPhotoSize = function(photoJSON) {
var parsedJSON = JSON.parse(data);
var last = parsedJSON.sizes.size.length;
console.log(parsedJSON.sizes.size[last-1].source);
return parsedJSON.sizes.size[last-1].source;
}
...
flickrRequest(options, 1, function(data) {
...
flickrRequest(sizesOptions, 0, function(data) {
parsedJSON = JSON.parse(data);
console.log(parsedJSON);
processPhotoSize(data);
});
}

about java script variable scope and facebook api

I am using facebook login api to get user information, code can exceed correctly and FirstName can get from facebook api, but the first alert has correct value, the second value is still "". First I think it is because remote call time cause the second alert is before the first alert, after I using a delay function before second alert, also I can not get value in the second alert.
Part of code like below.
if (response.status === 'connected') {
FirstName="";
LastName="";
FB.api('/me', function(response) {
FirstName = response.first_name;
LastName = response.last_name;
Email = response.email;
alert(FirstName);
});
alert(FirstName);
}

FB.Api is asynchronies method, which will post/get to a remote server.
The execution don’t wait for it to finish before your second “alert”
The only way you can be sure your FirstName is initialized, is using callbacks or MVVM pattern.
Here MVVM with knockout.js code:
var fbModel = function () {
var self = this;
self.FirstName = ko.observable("");
self.FirstName.subscribe(function () {
//DO what you want, first name just been changed from FB
});
self.load = function () {
FB.api('/me', function (response) {
self.FirstName(response.first_name); // WILL TRIGGER self.FirstName.subscribe
});
};
};
And don’t forget, applying this model is easy, I can give you some links if you want. (But just go and look on examples on their site)
Edit : callback version
var FirstName = ""; // Global
function callback(name) {
//your name has been loaded
FirstName = name; // Global is initialized
};
function load (callback) {
FB.api('/me', function (response) {
callback(response.first_name);
});
};
//Now just call the load :
load(callback);

Accessing outer scope

I'm working on creating a Users collection with the ability to then grab single users inside. This will be used to match from another system, so my desire is to load the users once, and then be able to fine/match later. However, I'm having a problem accessing the outer users collection from an inner method.
function Users(){
var allUsers;
this.getUsers = function () {
// ajax to that Jasmine behaves
$.ajax({
url: '../app/data/jira_users.json',
async: false,
dataType: 'json',
success: function(data) {
allUsers = data;
}
});
return allUsers;
};
this.SingleUser = function (name) {
var rate = 0.0;
var position;
this.getRate = function () {
if(position === undefined){
console.log('>>info: getting user position to then find rate');
this.getPosition();
}
$.ajax({
url: '../app/data/rates.json',
async: false,
dataType: 'json',
success: function(data) {
rate = data[position];
}
});
return rate;
};
this.getPosition = function () {
console.log(allUsers);
//position = allUsers[name];
return position;
};
//set name prop for use later I guess.
this.name = name;
};
}
and the test that's starting all of this:
it("get single user's position", function(){
var users = new Users();
var someone = new users.SingleUser('bgrimes');
var position = someone.getPosition();
expect(position).not.toBeUndefined();
expect(position).toEqual('mgr');
});
The getPosition method is the issue (which might be obvious) as allUsers is always undefined. What I have here is yet another attempt, I've tried a few ways. I think the problem is how the Users.getUsers is being called to start with, but I'm also unsure if I'm using the outer and inner vars is correct.

Though the others are correct in that this won't work as you have it typed out, I see the use case is a jasmine test case. So, there is a way to make your test succeed. And by doing something like the following you remove the need to actually be running any kind of server to do your test.
var dataThatYouWouldExpectFromServer = {
bgrimes: {
username: 'bgrimes',
show: 'chuck',
position: 'mgr'
}
};
it("get single user's position", function(){
var users = new Users();
spyOn($, 'ajax').andCallFake(function (ajaxOptions) {
ajaxOptions.success(dataThatYouWouldExpectFromServer);
});
users.getUsers();
var someone = new users.SingleUser('bgrimes');
var position = someone.getPosition();
expect(position).not.toBeUndefined();
expect(position).toEqual('mgr');
});
This will make the ajax call return whatever it is that you want it to return, which also allows you to mock out tests for failures, unexpected data, etc. You can set 'dataThatYouWouldExpectFromServer' to anything you want at any time.. which can help with cases where you want to test out a few different results but don't want a JSON file for each result.
Sorta-edit - this would fix the test case, but probably not the code. My recommendation is that any time you rely on an ajax call return, make sure the method you are calling has a 'callback' argument. For example:
var users = new Users();
users.getUsers(function () {
//continue doing stuff
});
You can nest them, or you can (preferably) create the callbacks and then use them as arguments for eachother.
var users = new Users(), currentUser;
var showUserRate = function () {
//show his rate
//this won't require a callback because we know it's loaded.
var rate = currentUser.getRate();
}
var usersLoaded = function () {
//going to load up the user 'bgrimes'
currentUser = new users.SingleUser('bgrimes');
currentUser.getRate(showUserRate);
}
users.getUsers(usersLoaded);

your approach to fill the data in allUsers is flawed
the ajax call in jquery is async so every call to users.getAllUsers would be returned with nothing and when later the success function of the jquery ajax is called then allUsers would get filled

this.getUsers() won't work. Its returning of allUsers is independent from the ajax request that fetches the data, because, well, the ajax is asynchronous. Same with getRate().
You'll have to use a callback approach, where you call getUsers() with a callback reference, and when the ajax request completes, it passes the data to the callback function.
Something like:
this.getUsers = function (callback) {
// ajax to that Jasmine behaves
$.ajax({
url: '../app/data/jira_users.json',
async: false,
dataType: 'json',
success: function(data) {
callback(data);
}
});
};
And the call would be along the lines of:
var user_data = null;
Users.getUsers(function(data) {
user_data = data;
});