JSON/AJAX and Facebook - javascript

I'm currently creating a facebook fan page (www.facebook.com.SSBMstream), and I am using a static html app to create a section that will allow users to select a twitch.tv stream they wish to watch using a button. I want to go one step further and list channels based on whether or not they are 'live' or offline. Twitchtv/Justintv already has an api set up for exactly that (http://api.justin.tv/api/stream/list.json?channel=) where you can just plug in the channel name and get '[]' if it is not live and what I believe is JSON if it is. How to dynamically check each channel in my array to determine if it is live and, if possible, access the information in that api to allow me to update titles and the like?
EDIT: Here's the hollowed out version of my code (Only the part I'm having trouble with)
I'm having it return the information from the other page as a debugger so I can test whether or not (if/when) it's working.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadJSON()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("div1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://api.justin.tv/api/stream/list.json?channel=ignproleague",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="div1"><h2>Just a test</h2></div>
<button type="button" onclick="loadJSON()">Change Content</button>
</body>
</html>

It depends on how twitch defines what is live and what isn't. Sorry I'm not super familiar with twitch's API but if it returns an empty array if the channel isn't live you could simply check if (array.length == 0).
If you are given a JSON object, then just interact with the appropriate information you need. I don't know exactly how twitch formats their JSON objects but here is an example. Let's say it returned this JSON object:
var JSONobj = {
"channelName": "e-sports", "channelTheme: "Professional Gaming", "viewerCount": 100
};
To retrieve the information you would just have to call the appropriate field.
var chan = JSONobj.channelName; //chan = "e-sports
var theme = JSONobj.channelTheme; //theme = "Professional Gaming"
Hope this helps
EDIT: It seems you need help with understanding AJAX. Let me just give you a rough idea of what the syntax is. I personally use a framework called Prototype.js
new Ajax.Request(WEB_SERVICE, {
method: "get",
parameters: {"type" : type, "name" : name},
onSuccess: successCall,
onFailure: ajaxError,
onException: ajaxError
});
This is your pretty typical AJAX request. When this is called, it'll throw an AJAX request to a WEB_SERVICE (generally a PHP document that will get the parameters passed and then calculate something from it). In this scenario the method being passed is "GET" and the parameters being passed is in the form of an object with the fields "type" and "name". successCall is a method that is called when the AJAX request successfully is passed and returns the ajax that has been calculated. I'm assuming in your scenario your AJAX should be receiving some information in a JSON format so its important your successCall function not only gets back that information, but parses through it as if it were JSON. Your successCall function would look something like this:
function successCall(ajax) {
var info = JSON.parse(ajax.responseText);
Hopefully from here you have a good understanding of what's going on. Try to work with this and if you still need help, just comment.
Oh and I didn't see that other comment. If you want to MAKE a JSON object you can do so like this.
var JSONobj = {};
JSONobj.field = something;
Your JSON object would then look something like this:
JSONobj = { "field" : something };
It is important you stringify the JSONobj if you want to pass it as a String. I guess it depends on how your WEB_SERVICE is handling it and you can do so like this.
var stringJSON = JSON.stringify(JSONobj);
Hope this helps.

Related

$.get with dynamic data names?

I am having an issue trying to set the data name or the objects being passed in. I am writing a system that uses AJAX to send requests to the server which then returns the necessary data. However, I am trying to make things generic to where if the developer adds more "slates" then it will automatically send the request on its behalf. The code looks as following:
$(document).ready(function() {
$(".slate").each(function(){
$.get("requests.php", { $(this).attr('name') : "true" }, function(data){
});
});
});
in other words it takes the name of the element and applies it to the query string. JavaScript doesn't seem to like the
$(this).attr('name')
in the syntax which is understandable since it expects just text (not a var or a string). Is there a way to make this work? Any help is greatly appreciated!
$(document).ready(function() {
$(".slate").each(function(){
var data = {};
data[$(this).attr('name')] = "true";
$.get("requests.php", data, function(data){
});
});
});

Accessing data returned by GET request using Javascript

Hi I'm trying to use Javascript to write a chrome application that will show your last number of tweets but I'm having trouble getting the tweets. I'm a newbie to javascript but I have searched quite a bit and can't find an understandable answer to this.
From chrome and twitter I have the following code.
<script type="text/javascript">
var req = new XMLHttpRequest();
req.open(
"GET",
"https://api.twitter.com/1/statuses/user_timeline.json?
include_entities=true&include_rts=true&screen_name=twitterapi&count=3")
</script>
This GET request works but how do I use the data it returns with javascript?
The result is in the req.responseText. You can append it o your document, to see what the response is. It actually depends on what is the response. I mean maybe you need to alert the response, or show it somewhere, or put it in a condition operator and compare with something... Some basoc use:
alert(req.responseText);
document.body.innerHTML+=req.responseText;
It is somewhere in req.responseText. That is, you need to set req.onreadystatechange and once it's ready you'll have it in there.

How to pass variables from an HTTPObject

I'm very, very new to Javascript, and to web programming in general. I think that I'm misunderstanding something fundamental, but I've been unable to figure out what.
I have the following code:
function checkUserAuth(){
var userAuthHttpObject = new XMLHttpRequest();
var url = baseURL + "/userAuth";
userAuthHttpObject.open("POST",url,true);
userAuthHttpObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
userAuthHttpObject.onload=function(){
if (userAuthHttpObject.readyState == 4) {
var response = json.loads(userAuthHttpObject.responseText);
return response; //This is the part that doesn't work!
}
};
userAuthHttpObject.send(params);
}
I would love to call it from my page with something like:
var authResponse = checkUserAuth();
And then just do what I want with that data.
Returning a variable, however, just returns it to the userAuthObject, and not all the way back to the function that was originally called.
Is there a way to get the data out of the HttpObject, and into the page that called the function?
Working with AJAX requires wrapping your head around asynchronous behavior, which is different than other types of programming. Rather than returning values directly, you want to set up a callback function.
Create another JavaScript function which accepts the AJAX response as a parameter. This function, let's call it "takeAction(response)", should do whatever it needs to, perhaps print a failure message or set a value in a hidden field and submit a form, whatever.
then where you have "return response" put "takeAction(response)".
So now, takeAction will do whatever it was you would have done after you called "var authResponse = checkUserAuth();"
There are a couple of best practices you should start with before you continue to write the script you asked about
XMLHTTTPRequest() is not browser consistent. I would recommend you use a library such as mootools or the excellent jquery.ajax as a starting point. it easier to implement and works more consistently. http://api.jquery.com/jQuery.ajax/
content type is important. You will have have problems trying to parse json data if you used a form content type. use "application/json" if you want to use json.
true user authorization should be done on the server, never in the browser. I'm not sure how you are using this script, but I suggest you may want to reconsider.
Preliminaries out of the way, Here is one way I would get information from an ajax call into the page with jquery:
$.ajax({
//get an html chunk
url: 'ajax/test.html',
// do something with the html chunk
success: function(htmlData) {
//replace the content of <div id="auth">
$('#auth').html(htmlData);
//replace content of #auth with only the data in #message from
//the data we recieved in our ajax call
$('#auth').html( function() {
return $(htmlData).find('#message').text();
});
}
});

AJAX post JSON data from Javascript to Grails

I'm trying to POST JSON formatted data from Javascript (using Prototype) to Grails. My Javascript code is:
var JSONObject = new Object;
JSONObject.id = "23";
JSONObject.name = "Test 1";
JSONstring = JSON.stringify(JSONObject);
var url = "${createLink(controller:'testController', action:'receiveJson')}";
new Ajax.Request(url, {
method:'post',
contentType:'application/json',
parameters:JSONstring,
asynchronous:true,
onSuccess: function (req) {
sendInfoResponse(req.responseText);
}
});
and the code in my Grails controller is:
def receiveJson = {
def json = request.JSON;
}
However, the 'json' variable appears to be empty in my tests. I'd be so grateful if someone could explain what I'm doing wrong. Many thanks.
In your Ajax.Request options change
parameters:JSONstring,
to
postBody:JSONstring,
The problem with using parameters is that it URL encodes the data so that the request body ends up looking like this:
%7B%22id%22%3A%2223%22%2C%22name%22%3A%22Test%201%22%7D&_=
Instead of the desired (which is what you get with postBody):
{"id":"23","name":"Test 1"}
Good question mfloryan - I was doing the testing manually, i.e. not as part of a unit or integration test.
Thanks very much for the help hvgotcodes. I made the changes to my code as you have suggested, but unfortunately to no avail. Interestingly, if I print request.JSON I get {}, whereas if I print request.json I get null.
EDIT: By 'printing' I mean using: request.JSON.toString()
EDIT: Thank you all so much for the help. Once I'd made the final change John Wagenleitne suggested the code began working properly. I'm very grateful indeed for all your help.
I don't think you are invoking the Ajax.Request correctly. From the documentation, the parameters option:
"The parameters for the request, which will be encoded into the URL for a 'get' method, or into the request body for the other methods. This can be provided either as a URL-encoded string or as any Hash-compatible object (basically anything), with properties representing parameters."
I think you need to do something like
...
parameters: {json: JSONString}
...
and then in your controller
request.json
note the form of the parameters object literal - it tells the Prototype library to make the request key 'json' and the request value be the json string. You access the key off the request object in the controller.
EDIT -- I just realized you're javascript block is jacked up.
This:
var JSONObject = new Object;
should be something like
var JSONObject = new Object();
...
you might also be able to do just an object literal, so
var jsonObject = {};
....

jsonp request not working in firefox

I am trying a straightforward remote json call with jquery. I am trying to use the reddit api. http://api.reddit.com. This returns a valid json object.
If I call a local file (which is what is returned from the website saved to my local disk) things work fine.
$(document).ready(function() {
$.getJSON("js/reddit.json", function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
$("#redditbox").append("<div>" + title + "<div>");
});
});
});
If I then try to convert it to a remote call:
$(document).ready(function() {
$.getJSON("http://api.reddit.com", function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
$("#redditbox").append("<div>" + title + "<div>");
});
});
});
it will work fine in Safari, but not Firefox. This is expect as Firefox doesnt do remote calls due to security or something. Fine.
In the jquery docs they say to do it like this (jsonp):
$(document).ready(function() {
$.getJSON("http://api.reddit.com?jsoncallback=?", function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
$("#redditbox").append("<div>" + title + "<div>");
});
});
});
however it now stops working on both safari and firefox. The request is made but what is return from the server appears to be ignored.
Is this a problem with the code I am writing or with something the server is returning? How can I diagnose this problem?
EDIT Changed the address to the real one.
JSONP is something that needs to be supported on the server. I can't find the documentation, but it appears that, if Reddit supports JSONP, it's not with the jsoncallback query variable.
What JSONP does, is wrap the JSON text with a JavaScript Function call, this allows the JSON text to be processed by any function you've already defined in your code. This function does need to be available from the Global scope, however. It appears that the JQuery getJSON method generates a function name for you, and assigns it to the jsoncallback query string variable.
The URL you are pointing to (www.redit.com...) is not returning JSON! Not sure where the JSON syndication from reddit comes but you might want to start with the example from the docs:
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function (data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#redditbox");
if ( i == 4 ) return false;
});
});
});
(apologies for formatting)
EDIT Now I re read your post, I see you intended to go to api.reddit.com unfortunately you haven't got the right parameter name for the json callback parameter. You might need to further consult the reddit documentation to see if they support JSONP and what the name of the callback param should be.
I'm not sure about reddit.com, but for sites that don't support the JSONP idiom you can still create a proxy technique (on the backend) that would return the reddit JSON, and then you would just make an ajax request to that that.
So if you called http://mydomain.com/proxy.php?url=http://api.reddit.com:
<?php
$url = $_GET["url"];
print_r(file_get_contents($url));
?>
http://api.reddit.com/ returns JSON, but doesn't appear to be JSONP-friendly. You can verify this, if you have GET, via
% GET http://api.reddit.com/?callback=foo
which dumps a stream of JSON without the JSONP wrapper.
http://code.reddit.com/browser/r2/r2/controllers/api.py (line 84) shows the code looking for 'callback' (not 'jsoncallback'). That may be a good starting point for digging through Reddit's code to see what the trick is.

Categories