How to retrieve data from Json using AngularJS?

Question

I've recently tried retrieving data from a JSON file using AngularJS. However I don't know how to do this; I've attempted to do this but it doesn't work, can someone please tell me where I'm going wrong?

<div ng-repeat="stuff in otherStuff">
  <p>Title: {{stuff.name}}</p>
  <p>Url: {{stuff.url}}</p>
</div>

DataController:

$scope.otherStuff = {};
jsonFactory.getOtherStuff()
  .then(function (response) {
    $scope.otherStuff = response.data.components;
  }, function (error) {
    console.error(error);
  });

jsonFactory:

angular.module('generatorMeanstackApp')
  .factory('jsonFactory', function ($q, $http) {
    return {
      getOtherStuff: function () {
        var deferred = $q.defer(),
          httpPromise = $http.get('data.json');

        httpPromise.then(function (response) {
          deferred.resolve(response);
        }, function (error) {
          console.error(error);
        });

        return deferred.promise;
      }
    };
  });

Example of my JSON data:

{
  "name": "Blogs",
  "url": "blogs.my-media-website.com/*",
  "dependsOn": ["Wordpress MU"],
  "technos": ["PHP", "Wordpress"],
  "host": { "Amazon": ["?"] }
},

Answer 1

In your controller, the reference to the data (via service) is nested too deep, it should be:

$scope.otherStuff = response.data;

Instead of:

$scope.otherStuff = response.data.components;

You can wrap your JSON in an array:

[
  {...},
  {...},
  {...}
]

Also, if you have scaffolded with yeoman, data.json needs to be in the app/ route. If it's outside of the route you will get a 404.