3

I was trying to read an info.json file, using the jQuery API. Please find the code below, which is part of test.html.

$.getJSON('info.json', function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

The test.html file resides on my local machine and when I try to open it in the browser, the Ajax call is not getting triggered and the info.json file is not read.

Is it not working because I don't have a web server? Or am I doing anything wrong in the code? (I don't see any errors in the Firebug console though).

Thanks in advance.

dda
  • 6,030
  • 2
  • 25
  • 34
KrankyCode
  • 441
  • 1
  • 8
  • 24
  • No need of apache for accessing json file , if you are accessing the local file , the protocol will be file://xxxx , if its through http it will be http: //xxxx – Akhil Thayyil Mar 18 '13 at 05:53
  • 1
    @AkhilThayyil Are you sure ? That the browser won't thrown a security restrictions error ? – Harsha Venkataramu Mar 18 '13 at 05:55
  • 1
    having a test server is always a good thing.Try http://www.wampserver.com/en/ – Harsha Venkataramu Mar 18 '13 at 05:56
  • @harsha if you are accessing the json file from the same path , then the security execption wont happen , check this http://stackoverflow.com/questions/10760689/how-can-i-load-a-local-json-file – Akhil Thayyil Mar 18 '13 at 05:59
  • @AkhilThayyil : That's precisely my point.You have to change the same origin policy manually on the browser.It's not by default! – Harsha Venkataramu Mar 18 '13 at 06:01
  • @harsha if you are accessing file from same path , then it will work without changing config – Akhil Thayyil Mar 18 '13 at 06:03
  • Thanks Akhil and Harsha. Have started using apache web server in the XAMPP package and have placed my files under htdocs folder and tried accessing the files with **localhost/test.html**. everything works as expected :) – KrankyCode Mar 18 '13 at 06:07
  • @AkhilThayyil : that did not work for me!But anyway , since the OP has got what he was looking for , lets end this argument ;-) – Harsha Venkataramu Mar 18 '13 at 06:22

4 Answers4

2

You will always have to host your site from where you are making AJAX call. Otherwise it will throw this exception.

origin null is not allowed by access-control-allow-origin

Host your page on localhost server and I guess everything will work nicely.

Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
  • Thanks blunderboy... Yes, it started working after placing under localhost server, i used the xampp package. – KrankyCode Mar 18 '13 at 06:11
1

While technically you don't need a web server for this, some of the libraries you use to abstract network access may not work with local files and some browsers don't let local files do a lot, so something like a little test web server for static files would be very useful for your development and testing.

Community
  • 1
  • 1
Thilo
  • 257,207
  • 101
  • 511
  • 656
0

Install a small webserver like http://jetty.codehaus.org/jetty/ easy to install, and small download ;)

hamilton.lima
  • 1,902
  • 18
  • 29
0

By putting your JSON string into a text file and loading it in a iframe, you can extrapolate the data. (Most browsers can load .txt files in iframes.)

var frame = document.createElement("IFRAME"); //Create new iframe
var body = document.body;
frame.onload = function() { //Extrapolate JSON once loaded
  data = JSON.parse(frame.contentDocument.documentElement.innerText); //Loads as a global.
  body.removeChild(frame); //Removes the frame once no longer necessary.
}
frame.style.display = "none"; //Because the frame will have to be appended to the body.
body.appendChild(frame);
frame.src = "your JSON.txt"; //Select source after the onload function is set.
Patrick Trester
  • 1