CODEWITHSUNDEEP
javascriptjsonangularjsweb-applications
oneCoderToRuleThemAll
oneCoderToRuleThemAll

Reputation: 865

Why can't I load up a local JSON file with AngularJS $http?

I am trying to load up local file(todo.json) that is in the same folder as my webpage with the following line:

$http.get("todo.json").success( function( data ){ //Do Some logic});

But I get the following error message in the Javascript console:

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/quickCoder/Desktop/HTML5Apps/todo.json'.
...

As mentioned, the index.html file consisting of this code is in the same HTML5Apps folder as todo.json. Any suggestions ?

Upvotes: 0

Views: 825

Answers (1)

AWolf
AWolf

Reputation: 8970

I think you need a running webserver that serves your files and the json file have to be in the folder of your server.

You can use a server like node-serve. It's easy to run once installed just type serve in your terminal.

[...] Now the protocol for a local file is not http:// but file://. Therefore, you cannot do a direct AJAX request from a local file. The same applies to many other APIs available through JavaScript, which can only request access through the HTTP protocol. This is because of the Web's security model, which we'll discuss in another article.

source of the quote mdn

Upvotes: 1

Related Questions