Accessing JSON file in AngularJS

Question

I recently created a new Anguar App and wanted to store some data in a JSON file. I was wondering 1) where best to store the .json file within the app and 2) how to access said file.

I am currently getting the following error in my Chrome console: GET http://localhost:8000/travelMap/stateData.json 404 (Not Found)

This is a simple app, but I am newer to Angular/Javascript and want to make sure this follows best practices.

Thank you!

My folder structure is as follows: I would like to access the json in the travelMapCtrl and I've stored the json file in the same folder as this controller (travelMap) for now

This is the JS where I am attempting to access the json:

$http.get('stateData.json').then(function successCallback(response) {
    console.log(response);
  }, function errorCallback(response) {
    console.log(response);
  });

try this localhost:8000/components/travelMap/stateData.json ur file is in component folder.. — Himanshu Bansal
– Himanshu Bansal, Commented Feb 16, 2017 at 18:36
@HimanshuBansal I actually updated the path to /components/travelMap/stateData.json and that worked. So simple. Thanks for the help! — laura42
– laura42, Commented Feb 16, 2017 at 18:42
sure np ^^ feel free to ping me for any angularjs related question — Himanshu Bansal
– Himanshu Bansal, Commented Feb 16, 2017 at 18:45

Aladdine Mokri · Accepted Answer · 2017-02-16 19:18:21Z

1

$http service is unable to locate the file because the argument that you pass to $http.get() is the path relative to the root of the app (not relative to where the controller is).

You can put your JSON files in a data folder and pass the relative path to the root app folder. For instance, if your root app is in "app" folder, then you can create a "data" folder inside the "app" folder and insert your stateData.json file in it. Then your API call would be: $http.get("/data/stateData.json")

Your app structure would be:

LauraApp/app/app.js
LauraApp/app/data/stateData.json

answered Feb 16, 2017 at 19:18

Aladdine Mokri

613 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing JSON file in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related