31

I am new to angularjs and I've been searching on the web the whole day just to find a solution in getting data from a local json file without having to use a localhost for my webapp. Unfortunately, I haven't found any. I tried using $http.get but I get Cross Origin * error.

Is there no other way that I could get the data from my local json file without having to locally host my webapp?

Does angularjs have any other function to get data from local json files without having to use its $http.get?

Jibo
  • 479
  • 1
  • 7
  • 13
  • 1
    I dont get the relevance of your suggested links. I already know that. I am only asking if Angularjs has the capability to read local JSON files like vanillajs' jsonp.fetch(url) function can. – Jibo Oct 31 '14 at 02:06
  • All your (@Re-l, @ivarni, @Second Rikudo) suggested duplicates doesn't seem to be relevant to the question. My understanding is, the question is pertaining to the approach using `Angular.JS` **Framework**. Angular.JS is still JavaScript but has its own approaches which may differ from **Native JavaScript**. – Jenny Casarino Oct 31 '14 at 02:31
  • @JennyCasarino Angular IS Javascript. It is limited by the same rules that applies to Javascript. If you can't do something in Javascript then you can't do it in Angular. It **does not** differ from native Javascript when it comes to sandboxes. – ivarni Oct 31 '14 at 05:11
  • @ivarni in that case, if JavaScript is not limited on accessing **local JSON file** (_as what the question is all about_), you're saying that `AngularJS` **Framework** can do the same. In my understanding, I repeat, the question is about how to achieve such task using `AngularJS`. I really don't the answer for @GreenSky's question, 'cause I am also looking for answers. But if the QUESTION is about on how to do it _using_ **pure Native** `JavaScript`. I'll answer him to use [JSONP](http://www.sitepoint.com/jsonp-examples/) – Jenny Casarino Oct 31 '14 at 10:57
  • function populateMenuList(){var e={callbackCounter:0,fetch:function(e,t){var n="MyProducttable_"+this.callbackCounter++;window[n]=this.evalJSONP(t);e=e.replace("=MyProducttable","="+n);var r=document.createElement("SCRIPT");r.src=e;document.getElementsByTagName("HEAD")[0].appendChild(r)},evalJSONP:function(e){return function(t){var n=false;if(typeof t=="string"){try{n=JSON.parse(t)}catch(r){console.log("Exception Error: "+r)}}else{n=JSON.parse(JSON.stringify(t));}if(n){e(n);}else{throw"JSONP call returned invalid or empty JSON"}}}};e.fetch("json/producttable.json")} – Jenny Casarino Oct 31 '14 at 11:02
  • I'll try one more time then. If Javascript runs in a sandbox that does not allow you to access the filesystem, then that's a limitation that's also true for Angular. I thought this was a fairly simple concept. It's a duplicate because the answer to this question is the same as the answers to all those other questions. – ivarni Oct 31 '14 at 11:37
  • @ivarni sandbox is the problem. But not the answer to my question. I need suggestions, work arounds, or alternative angularjs functions. – Jibo Nov 03 '14 at 04:13
  • @GreenSky It's going to be hard to provide a work-around for one of the most important security features in the language. My only suggestion would be to make it a .js file that puts its data on some global variable and include that in a script tag, but then it's no longer json. Or deploy to an http server but that was already suggested. – ivarni Nov 03 '14 at 05:31
  • I think deploying to an **http server** is not an option here. – Jenny Casarino Nov 03 '14 at 05:44
  • 1
    And this question shouldn't be **tag** as **[_duplicate_]** – Jenny Casarino Nov 03 '14 at 05:45
  • Use Mozilla instead of Chrome. Mozilla doesn't have local acces policy(ies) like Chrome .. – Cugomastik Jun 08 '15 at 11:27
  • Can't agree more: this question is not a duplicate. When you use a framework, most of the time, you have an easier way of doing such simple things. – MaximeBernard Jun 17 '15 at 12:58
  • @Ivarni Their is a clear difference between using a framework, and shoehorning code to hack something together. Please remove your duplicate tag from this question as this question is specific to Angular, and a plain JS solution is not appropriate. – Fred Jul 12 '17 at 22:12

2 Answers2

31

You can refer to json file calling them with a GET method, like so:

$http.get('phones/phones.json').success((data) => {
   $scope.phones = data;
});

Check the official AngularJS tutorial to see what you are doing wrong.

Update:

For angular 1.6+ success method is not valid anymore instead use then:

$http.get('phones/phones.json').then((data) => {
   $scope.phones = data;
});

Refer to source here.

Kutyel
  • 8,575
  • 3
  • 30
  • 61
  • 4
    I've already tried that. It's still giving me the cross origin * error – Jibo Oct 30 '14 at 09:43
  • Post your code or make up a fiddle if you have doubts about your code. Maybe you are miss-using the `$http` on your controller. It is a common mistake. – Kutyel Oct 30 '14 at 09:45
  • var app = angular.module("MyApp", []); app.controller("MyFunction", ['$scope','$http', function($scope, $http) { $http.get('json/producttable.json').success (function(data){ $scope.mydata = data; }); }] ); – Jibo Oct 30 '14 at 09:55
  • The code is just OK, I have exactly the same code and it works for me but it is true that I am running my angular app in localhost... – Kutyel Oct 30 '14 at 10:00
  • the value is undefined – Siddharth Jul 16 '15 at 09:47
  • I am doing the same thing but it looks angular js is always try to get the file from localhost server. so I got a 404 error like `GET http://localhost:3005/phones/phones.json 404 (Not Found)` – danny Oct 29 '20 at 03:48
4

You need to deploy your application to some http server, the easiest way to this is using node, here is the exmaple https://www.npmjs.org/package/http-server, or you can change you browser security settings.

Grissom
  • 1,080
  • 8
  • 21
  • but that still means i'll locally host it. the webapp im currently developing requires the json to be local so that when there is no internet connection i would still be able to see something. the native side writes this json file. It's a hybrid type of app. – Jibo Oct 30 '14 at 10:13
  • Is this chrome extension? There is the problem, you can't load file from local system, that would be big security issue if you load file withoud user interaction, you can make file input, so user can load that json, or store the values to localstorage. – Grissom Oct 30 '14 at 10:24
  • so unlike plain old js. angularjs doesnt have anything like jsonp.fetch(url) where i can fetch data from local json files? – Jibo Oct 30 '14 at 10:33
  • You can try this https://docs.angularjs.org/api/ng/service/$http#jsonp – Grissom Nov 03 '14 at 08:57
  • 1
    after an hour of research and testing. finally got it to stop giving me the cross domain error. thanks! – Jibo Nov 04 '14 at 02:47