1

I've got a json file, the contents of which I'd like to make available in my angular application. I was reading in this thread about using $http.get to load json from the filesystem. I can't get this to work, I am continually getting "http://localhost:9000/jsonFile.json not found" when I run the code that loads it in the console (via $injector.get). I used yeoman to generate my app, and the structure looks like this:

app
  --scripts
    --services
      --jsonLoader.js
    --app.js
  --index.html
  --jsonFile.json

The jsonLoader.js file is

angular.module('jsonLoader', [])
.service('loader', function($http){
  var schema = {};
  $http.get('jsonFile.json')
  .then(function(res){
    schema = res.data;
  });
  return schema;
});

I've tried every combination of paths that might refer to the location of the json file, but I'm still getting the 404 when I try to access the service. Any help would be most appreciated!

Community
  • 1
  • 1
biagidp
  • 2,175
  • 3
  • 18
  • 29

1 Answers1

1

Your problem is not related to Angular, but most likely your Grunt setup. Your Grunt is not watching JSON files, and therefor your Angular app has no access to the JSON file you are trying to access.

To make JSON files accessible, you need to add the following to your grunt file which is part of Yeoman for Angular:

  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      '<%= yeoman.app %>/{,*/}*.html',
      '<%= yeoman.app %>/{,*/}*.json', //added this line
      '.tmp/styles/{,*/}*.css',
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
    ]
Bricktop
  • 1,549
  • 14
  • 23