Trouble including JSON in angular controller

Question

I've got an angular controller containing a json object

app.controller("buildControl", function($scope){

$scope.buildData = [
{
    'title':'Workspace',
    'options': [{
        'title': 'Studio'
    },{
        'title': 'Garage'
    },{
        'title': 'Blank'
    }]
},{
    'title':'Frame',
    'options': [{
        'title': 'Studio'
    },{
        'title': 'Garage'
    },{
        'title': 'Blank'
    }]
}]
});

I'm using this data to iterate the object's arrays using ng-repeat (plus I have other functions in my controller that use the data).

Everything runs fine until I moved the json out into it's own file and used $http to include it.

app.controller("buildControl",function($http, $scope){

$http.get("json/buildData.js")
  .success(function(response){
    $scope.buildData = response.data;
  }).error(function(error){
    console.log(error);
  });
});

The only errors I get in my console are from all my other functions breaking without the data they need to run, plus an 'undefined' from my console log. So I know that it's going to '.error'.

I figured maybe I had the filepath wrong, have tried changing prefixing it with '../' to go up a directory out of my controllers. No luck. If I put the json in the same folder and just write;

.get("buildData.js")

I get this as the error

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /buildData.js was not found on this server.</p>
</body></html>

But then I sort out the filepath and it goes back to undefined. So I don't think this is the problem.

(I'm doing this using MAMP and having no HTTP errors associated with trying to get files locally).

Any help?

Before the line ` $scope.buildData = response.data;` add alert(typeof response.data) and see if it is a string or object. If it is a string, then it's raw JSON that must be parsed first. — Jeremy J Starcher
– Jeremy J Starcher, Commented Jun 5, 2016 at 19:58
I have also changed the file extension to and from .json, no dice. — jmcgrory
– jmcgrory, Commented Jun 5, 2016 at 20:11
Jeremy, adding this here does not work because the .success function isn't running so no data is being sent over and the alert isn't being run — jmcgrory
– jmcgrory, Commented Jun 5, 2016 at 20:12
Path is clearly wrong if you get 404 status returned from server — charlietfl
– charlietfl, Commented Jun 5, 2016 at 21:42

Andy_D · Accepted Answer · 2016-06-05 21:08:18Z

2

Not sure if you need to use $http here, why not include your data from a service, something like:

  angular
    .module('MyApp')
    .service('buildData', buildData);

  function buildData() {
    return [{
      'title':'Workspace',
      'options': [{
         'title': 'Studio'
      },{
        'title': 'Garage'
      },{
        'title': 'Blank'
      }]
    ...
    }]
  };

Your controller would look something like this:

.controller('buildControl', buildControl);

  buildControl.$inject = ['$scope', 'buildData'];
  function buildControl($scope, buildData) {
    $scope.buildData = buildData;
    ...
  }

edited Jun 5, 2016 at 21:08

answered Jun 5, 2016 at 21:00

Andy_D

4,22829 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Trouble including JSON in angular controller

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