mg.to - JSON for jQuery - Comments

ABOUT JQUERY WITH

bhagwat sharma — Thu, 18 Mar 2010 05:37:08 +0000

ABOUT JQUERY WITH JSON
please give me suggation

WITH COMPLETE EXAMPLE

RSS & JSON

jQuery Convert — Tue, 10 Nov 2009 05:38:29 +0000

I would also recommend lightweight syntex highlighter called “prettyprint” used on Google Code. It is lightweight and looks very clean.

Regarding this post. I came across it while searching for RSS to JSON converter plugin for jQuery. I thought I would share it here with everybody. The great thing about it is that you don’t need to setup any server-side scripts. All you need is a jQuery.js file. Everything is done on client side leveraging Google Feeds API.

Here is an example from original post:

Maybe in the core now, but...

Julian — Sat, 28 Mar 2009 13:18:29 +0000

… the core implementation have some serious limitations.

I made jquery-jsonp to deal with them.

Autopulate select dropdown using jquery and json

Visitor — Mon, 29 Sep 2008 02:52:36 +0000

Hello

I need your help on this.

Example: I have JSON data

Country Code

Belgium 106 China 103

How do I populate a HTML select dropdown box with the json data

Select Dropdown(Belgium, China)

Now when I select a value like China, it should traverse JSON and display the code.

Can someone show me an example of how, this can be done using JSON and Jquery.

Thanks

JSONP now in jQuery 1.2 core

Michael Geary — Fri, 14 Sep 2007 04:07:06 +0000

Thanks for the kind words and the heads-up, Paul.

As you probably know, the jQuery 1.2 core now supports cross-domain JSONP downloads natively. So there’s probably not much need for the plugin any more. I haven’t tested the new code yet, but it probably does a fine job.

jQuery 1.1.4 and appending script elements

Paul McLanahan — Mon, 27 Aug 2007 21:23:31 +0000

Hi Michael,

Excellent plugin first off. I love your closure solution for queuing the callbacks. I’ve actually used the idea of it for a recent plugin to use the Del.icio.us json feeds. I had to modify it to use an auto-incrementing array to house the callback references instead of the date-string based hash object due to the need to call several scripts in rapid succession. I was seeing callbacks overwritten due to them getting the exact same date string (I was surprised).

In any case… The main reason for my comment is to point out a problem I just fixed in my plugin and which your code appears to share. jQuery 1.1.4 now detects script elements being appended to the DOM using the $().append() method. When it detects one that also has a src attribute, it attempts to use $.ajax to grab the script and execute it. Our code will, for obvious reasons, cause that ajax call to fail. I had to go back to using real DOM methods to get it done. So, your 3rd to last line should be changed…

// From this

$('head',document).append( script );

// To this

document.getElementsByTagName('head')[0].appendChild( script );

Thanks again for the great plugin.

Cross-domain restriction

Michael Geary — Fri, 24 Aug 2007 06:14:03 +0000

Matthew, it sounds like you are running into cross-domain security. If your page is loaded from a domain other than “sub.domain.tld” then $.ajax will fail.

That is the whole point of the JSONP format with dynamic script tags as used in this plugin—it avoids all of the cross-domain security issues. You can load a script tag from any domain, and JSONP format is simply a way to request that a specific callback function name be executed with the JSON data as an argument.

Does your server actually provide JSONP output, where you can specify the callback function name in the URL? If it does, then you can use the plugin directly and not use $.ajax at all.

Tell me a bit more and we can come up with a solution…

JSONP with JQuery $.ajax?

Matthew Moore — Thu, 23 Aug 2007 16:43:00 +0000

Hi,

Is there a way to use the jquery $.ajax along with your plug-in and get a JSONP object?

Below is the code I have, but it’s getting a “XMLHttpRequest” error because I’m trying to call a resource from a sub-domain.

// initial ajax setup

$.ajaxSetup({

type: "GET",

dataType: "json",

global: true

url: "https://sub.domain.tld/data"

});

// offers ajax call

$.ajax({

data: {page: "offers", response: "jsonp", limit: "10"},

success: handleOffersSuccess,

error: handleOffersError

});

// success funciton

function handleOffersSuccess(obj){

var objCnt = obj.offers.length;

$("#ajax-offers").html("");

for(var i=0; i<objCnt; i++){

var advertiser = obj.offers[i].advertiser;

var subject = obj.offers[i].subject;

var url = obj.offers[i].url;

var image_url = obj.offers[i].image_url;

if( url == "" || url == null ){

advertiser = EscapeChar(advertiser);

subject = EscapeChar(subject);

if(i==0){

$("#ajax-offers").append("\n <dt>"+advertiser+"</dt>\n<dd>"+subject+"</dd><dd><img src=\""+image_url+"\"></dd>");

}else{

$("#ajax-offers").append("\n <dt>"+advertiser+"</dt>\n<dd>"+subject+"</dd>");

}; // end first object test

}else{

advertiser = EscapeChar(advertiser);

subject = EscapeChar(subject);

url = EscapeChar(url);

var img = image_url.length;

if(i==0){

if(img!=0){

$("#ajax-offers").append("\n <dt><a href=\""+url+"\" title=\"Offer From "+advertiser+"\">"+advertiser+"</a></dt>\n <dd><a href=\""+url+"\" title=\"Offer From "+advertiser+": "+subject+"\">"+subject+"</a></dd><dd><a href=\""+url+"\" title=\"Offer From "+advertiser+": "+subject+"\"><img src=\""+image_url+"\"></a></dd>");

}else{

} // end image test

}else{

}; // end first object test

}; // end url test

}; // end for loop

}; // end offers success function

// offers error funciton

function handleOffersError(request,errtype,e){

//alert('An error occurred while loading. Error Reported:\n' + e.message + '(' + e.description + ').');

$("#ajax-offers").html("<p>I'm sorry but there was an error retrieving the data.</p>");

} // end offers error function

All the plugin code you really need

Michael Geary — Sun, 12 Aug 2007 18:46:00 +0000

BTW, because of Flickr’s hardcoded callback function name, the only part of the plugin that you’re really using is the load() function:

function load( url ) {

var script = document.createElement( 'script' );

script.type = 'text/javascript';

script.src = url;

$('head',document).append( script );

}

So you could omit the plugin entirely and use this code instead:

$(document).ready(function(){

log( 'Document ready' );

var url = 'https://api.flickr.com/services/feeds/photos_public.gne?ids=10861890@N04&format=json';

log( 'url:', url );

loadJson( url );

});

function loadJson( url ) {

var script = document.createElement( 'script' );

script.type = 'text/javascript';

script.src = url;

$('head',document).append( script );

}

function jsonFlickrFeed( json ) {

log( 'json feed received:', json );

}

Be sure to load your page with Firebug and watch the console log - it’s pretty cool to see your name show up in the JSON response.

Also, install the Firefox Web Developer toolbar if you don’t already have it. Load your page and then select Information/View JavaScript from the toolbar. A new window or tab will open showing all of the scripts loaded in the page—inline, .js files, and JSON downloads. Click the Collapse All link at the top of the page to see just the URLs. Very handy to check out your JSON downloads this way.

Thank you

Eric — Sun, 12 Aug 2007 14:27:44 +0000

Wow, all I have to say is THANK YOU. I really appreciate the time you took to help me understand this. I will be working on this today after I pick through your code you gave me. Thank you for teaching me the log().

Working code

Michael Geary — Sun, 12 Aug 2007 09:14:36 +0000

Eric, you were pretty close there. Here’s an updated version of your code that works:

function log() {

if( window.console )

console.debug.apply( console, arguments );

else

alert( [].join.apply( arguments, [' '] ) );

}

$(document).ready(function(){

log( 'Document Ready' );

var url = 'https://api.flickr.com/services/feeds/photos_public.gne?ids=10861890@N04&format=json';

log( 'url:', url );

$().json( url );

});

function jsonFlickrFeed( json ) {

log( 'json feed received:', json );

}

I added a log() function to replace the alerts. If you load the page in Firefox with Firebug enabled, it will use console.debug() to log the messages, including making objects like the json response clickable and browsable. If Firebug is not available, it falls back to an alert() call. The fancy .apply() stuff is to make multiple arguments work in both these cases.

There were two things wrong in the code. First, you need to call the json function with $(selector).json(), where selector is an optional jQuery selector. You don’t need any selector in this particular case, so I left it empty. (In hindsight, my requirement for $() with or without the selector was a bit goofy—I will probably update the code sometime to make it work the way you tried to use it.)

After I fixed that, though, it still didn’t get to the callback function with the “json received” message. So I tried opening your Flickr feed URL directly in a browser, and found that the JSON response calls a function named jsonFlickrFeed(). I changed the {callback} to MikeTest, so the URL ended with format=json&jsonp=MikeTest. I also tried changing it to format=json&jsoncallback=MikeTest as described on Flickr’s JSON API page, but the response still called jsonFlickrFeed() instead of MikeTest().

It appears that Flickr’s feed API doesn’t support the user-defined callback function name that this plugin normally requres. (Their REST API does support jsoncallback=functionName and works fine with the plugin.)

A quick workaround for that is to simply define the jsonFlickrFeed() function directly instead of specifying the callback function in the $().json() call. At this point the plugin isn’t doing much for you except for creating the dynamic script tag, but it does get things working.

When I get a chance I’ll update the plugin to support this more directly. And hopefully Flickr will update their feed API to support the user-defined callback names as their REST API does.

Link to test page?

Michael Geary — Sun, 12 Aug 2007 02:53:45 +0000

Eric, do you have a test page you could post a link to? Or else let me know what the JavaScript error was?

I’ll try a test with your code, but if you have a link or error message that would give me a head start.

json

Eric — Sun, 12 Aug 2007 02:33:00 +0000

I added your code to my js files and put in the right order. I am new at this so I am trying to learn. When I runt he following code. I get an javascript error on my page and no output. Can you help me with what I am doing wrong. I am really trying to understand this stuff. Thanks.

$(document).ready(function(){

alert('Document Ready');

var url='https://api.flickr.com/services/feeds/photos_public.gne?ids=10861890@N04&format=json&jsonp={callback}';

alert(url);

$.json(url,function(json) {

alert('I received the json and put it in the json var : ' + json.toString());

});

Thanks Michael. I looked at

Johann — Thu, 02 Aug 2007 21:46:36 +0000

Thanks Michael.

I looked at the jQuery sources in the mean time. To me, jQuerys $.ajax seems to be lacking a fallback mechanism in case ActiveX controls are disabled. This is where your solution — or Ralf Engelschalls — could help.

They are different

Michael Geary — Thu, 02 Aug 2007 19:05:00 +0000

Both functions let you download JSON data, but they use different techniques and are made for different situations.

$.json() (this plugin) uses a dynamic script tag to download the JSON data. This lets it work across domains, but it requires that the JSON data be wrapped in a callback function (JSONP format).

$.getJSON() is an AJAX call, that is, it uses XMLHttpRequest. So it works only within the same domain—you can’t use it for cross-domain requests. But it doesn’t require JSONP format; it will work with any standard JSON data.

JSON for jQuery

Michael Geary — Wed, 25 Jan 2006 08:10:16 +0000

Update 2007-09-13: As of version 1.2, the jQuery core now supports cross-domain JSONP downloads as part of the native Ajax support. I suggest you use this support instead of the plugin.

jQuery is a nifty new JavaScript library by John Resig. It features a $() function like the one in Prototype.js, but beefed up with CSS and XPath selectors, and with the ability to chain methods to do interesting things with concise code.

Unlike Prototype, jQuery doesn’t mess around with built-in JavaScript objects. It’s new—too new to have a version number!—but I’ve been writing some code with it and enjoying it.

jQuery provides an easy way to write plugin methods to extend the $ function. For you JSON fans out there, here is a JSON plugin for jQuery which lets you write code like this:

function doJson( json ) {

// handle the json object here

}

$('#test').json( 'https://example.com/json-test?jsonp={callback}', doJson );

You can of course use an anonymous function if you prefer:

var url = 'https://example.com/json-test?jsonp={callback}';

$('#test').json( url, function(json) {

// handle the json object here

});

Or, using jQuery’s method chaining, you can combine calls like this code which displays a “Loading…” message when it starts loading the JSON resource:

$('#test').html( 'Loading...' ).json( 'https://example.com/json-test?jsonp={callback}', doJson );

To install the plugin, simply paste this code into a .js file and load it after loading jquery.js:

// JSON for jQuery by Michael Geary

// See https://mg.to/2006/01/25/json-for-jquery

// Free beer and free speech. Enjoy!

$.json = { callbacks: {} };

$.fn.json = function( url, callback ) {

var _$_ = this;

load( url.replace( /{callback}/, name(callback) ) );

return this;

function name( callback ) {

var id = (new Date).getTime();

var name = 'json_' + id;

var cb = $.json.callbacks[id] = function( json ) {

delete $.json.callbacks[id];

eval( 'delete ' + name );

_$_.each( function() { callback(json); } );

};

eval( name + ' = cb' );

return name;

}

function load( url ) {

var script = document.createElement( 'script' );

script.type = 'text/javascript';

script.src = url;

$('head',document).append( script );

}

};

This adds a json() method to the $ function. The first argument is the URL to the JSON resource, with the text {callback} wherever the JSON callback method should be provided. In a JSONP URL, you would use jsonp={callback}; in a Yahoo! JSON URL you would use format=json&callback={callback}.

The second argument is the callback function itself. When the JSON resource finishes loading, this function will be called with a single argument, the JSON object itself. Inside the callback function, this is a reference to the HTML element found by the $ function. (If $ found more than one element, the callback function is called for each of them.)

The callback function is required, so this code won’t work with plain JSON APIs like del.icio.us that don’t let you specify a callback function. This would be easy enough to fix; I didn’t need it for the code I was writing, and didn’t think of it until just now. :-)

The code goes to a bit of extra work to create both an array entry and a unique global name for each callback. The global name is what is substituted into the {callback} part of the URL. It uses this name instead of the array reference to ensure compatibility with any JSON APIs that don’t allow special characters in the callback name. In fact, in the current code the callbacks[] array entries are not really used, but I figured it could be handy to have an array of all outstanding callbacks.

Update: John Resig suggested a couple of improvements to the code, so it’s updated, simpler and better now.

Update 2: Code updated to include Stephen and Brent’s fixes from the comments.