How to set JSON to a variable from a local url

Question

Obviously jQuery made me stupid.

I have a local url that serves raw JSON and I cannot figure out how to use this json from my method without using jQuery.

Here, as I know, do it with jQuery

var myJson; $.getJSON('/local/path/to/json', function (data) { myJson = data; }); // Now I can use myJson in a method. 

Answer 1

To get the JSON string from the server, use the XMLHttpRequest object, as described in this link:

http://developer.mozilla.org/en/XMLHttpRequest

You will find that this is related to all invisible things that you need to consider and verify. So libraries like jQuery.

To convert a JSON string to a javascript object, use JSON.parse() . Here is the link:

http://developer.mozilla.org/En/Using_native_JSON

Here is an example:

 function readJSON(file) { var request = new XMLHttpRequest(); request.open('GET', file, false); request.send(null); if (request.status == 200) return request.responseText; }; var myObject = JSON.parse(readJSON('/local/path/to/json')); 

EDIT # 2: Thanks for editing in this example, Chase. A word of warning. It is not recommended to use the open() method for synchronous calls with false in the 3rd parma. AJAX is intentionally designed for asynchronous use, and a lock is offered for synchronous calls. As a person who thought there was room for synchronous calls, I now believe that there is always a better way to do this asynchronously. A word to the wise.

Answer 2

I am familiar with jQuery, this is a replacement for $.ajax :

Script:

 function ajax( uri, settings ) { var ajax = new window.XMLHttpRequest(), data = settings.type == 'GET' ? '' : settings.data, async = settings.async ? settings.async : false; uri = settings.type == 'GET' ? uri + ( settings.data ? '?' + settings.data : '' ) : uri; ajax.onreadystatechange = function () { if ( ajax.readyState == 4 ) { //response ready if ( ajax.status == 200 ) { //success if ( settings.success ) settings.success( ajax.responseText, ajax.statusText ); if ( settings.complete ) settings.complete( ajax, ajax.statusText ); } else { if ( settings.error ) settings.error( ajax, ajax.status, ajax.statusText ); }; }; }; ajax.open( settings.type, uri, async ); if ( settings.headers ) { for ( var header in settings.headers ) { ajax.setRequestHeader( header, settings.headers[header] ); }; }; ajax.send( data ); }; 

Name it the same as jQuery:

 ajax( '/local/path/to/json', { "type": "GET", //or "POST" //"data": "<query string>", //if POST "success": function ( data, status ) { var myJson = window.JSON.parse( data ); }, "error": function ( response, status, error ) { // handle error } } ); 

Answer 3

Please note that the code below, which will be included in all browsers, thanks

  function getJSONData(jsonurl) { var req = null; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } req.open('GET', jsonurl, false); req.send(null); return req.status == 200 ? req.responseText : 'Error occurred'; } var jsonData = JSON.parse(getJSONData('/local/path/to/json')); alert(getJSONData('/local/path/to/json')); 

Hope this will be very helpful, thanks for your time.