[Solved] Read fb Graph API object and keys values to use in js variables

Gino

02-28-2012, 01:48 PM

Hello,

Into an external js file, I'm trying to use the facebook graph api to read values of "shares" and "comments" and import them into js variables.
As example, using http://graph.facebook.com/?id=http://www.google.com in the browser, I get the following response:
{
"id": "http://www.google.com",
"shares": 3208837,
"comments": 2
}

In my js code, I need something like:
var val_shares=xx;
var val_comments=xx;

Here's the code I'm using to (try) do it:
function getNewHTTPObject()
{
var xmlhttp;

/** Special IE only code ... */
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/

/** Every other browser on the planet */
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}

return xmlhttp;
}

var xmlHttp = getNewHTTPObject();
function getDynamicData()
{
var url = "http://graph.facebook.com/?id=http://www.google.com";

xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = callbackFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
var syndLinkRequest = getNewHTTPObject();

function callbackFunction()
{
if (syndLinkRequest.readyState != 4)
return;

var result = xmlHttp.responseText;

}

into the HTML I call getDynamicData() at <body onload=getDynamicData()>...

Using Firefox in console mode, I see that the results arrive at this point of code:
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);

But I do not know (or understand) how and where to get those value to associate them to a js variable.
I understood I will need to use json to achieve this but I don't know where to start.
In addition, I can't use jQuery or php to do it.

After 2 days of searches, I'm about to give up.

Does anyone have an idea how to do or where I can find a concrete sample to show me the right way ?
Thanks a lot.

Gino

devnull69

02-28-2012, 01:58 PM

You instantiated two XMLHttpRequest objects where in fact you only need one (and it will only work with one in that case).

Are you still dealing with IE6 or below? If not (I hope so) you can also forget about the browser switch.

The code of the request is inside a function but I don't see any code calling this function ... so it might never be called actually.

When the result comes back from the server, it will be plain text representing a Javascript object (= JSON JavaScript Object Notation). You'll have to tell the browser that it has to be converted into a native object. Modern browsers have JSON.parse() for that purpose. In older browsers you can use eval() (please don't).

var xmlHttp = new XMLHttpRequest();

// make sure you actually CALL the following function anywhere!
function getDynamicData()
{
var url = "http://graph.facebook.com/?id=http://www.google.com";

xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = callbackFunction;
xmlHttp.send(null);
}

function callbackFunction()
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var result = xmlHttp.responseText;
if(JSON) {
var myobject = JSON.parse(result);
} else {
eval(' var myobject = ' + result + '; ');
}

// at this point you can access the native object
alert(myobject.shares);
}

}

Gino

02-28-2012, 02:07 PM

I could not imagine such a fast and clear answer.
Thank you very much for your help.

Gino

You instantiated two XMLHttpRequest objects where in fact you only need one (and it will only work with one in that case).

Are you still dealing with IE6 or below? If not (I hope so) you can also forget about the browser switch.

The code of the request is inside a function but I don't see any code calling this function ... so it might never be called actually.

When the result comes back from the server, it will be plain text representing a Javascript object (= JSON JavaScript Object Notation). You'll have to tell the browser that it has to be converted into a native object. Modern browsers have JSON.parse() for that purpose. In older browsers you can use eval() (please don't).

var xmlHttp = new XMLHttpRequest();

// make sure you actually CALL the following function anywhere!
function getDynamicData()
{
var url = "http://graph.facebook.com/?id=http://www.google.com";

xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = callbackFunction;
xmlHttp.send(null);
}

function callbackFunction()
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var result = xmlHttp.responseText;
if(JSON) {
var myobject = JSON.parse(result);
} else {
eval(' var myobject = ' + result + '; ');
}

// at this point you can access the native object
alert(myobject.shares);
}

}