Trying to access json-server data via a controller and factory in angular

Question

I'm writing a very simple test app in angular js and am trying to display data stored on a json server to display in the view.

db.json is as follows:

{
  "examples": [
    {
      "id": 0,
      "name": "example 0",
      "description": "Example 0 description."
    },
    {
      "id": 1,
      "name": "example 1",
      "description": "Example 1 description."
    }
  ]
}

controller is as follows:

angular.module('my_app')

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) {

    $scope.example = exampleFactory.query({
        })
        .$promise.then(
            function (response) {
                var examples = response;
                $scope.message = examples;
            },
            function (response) {
                $scope.message = "Error: " + response.status + " " + response.statusText;
            }
        );

}])

factory is as follows:

.factory('exampleFactory', ['$resource', 'baseURL', function ($resource, baseURL) {

        return $resource(baseURL + "examples/:id", null, {
            'update': {
                method: 'PUT'
            }
        });
}])
;

And view is as follows:

<p>Test outside repeat: {{message}}</p>

<ul>
   <li ng-repeat="example in examples">
       <p>Test in repeat: {{message}}</p>
       <p>{{example.name}}</p>
       <p>{{example.description}}</p>
    </li>
 </ul>

The interesting thing here is that the data is being returned by the factory. In the above example the first test (outside the ng-repeat) returns the full set. However, nothing inside ng-repeat shows up.

I've got this working using a slightly different arrangement using a service but it doesn;t seem to be working using a factory.

Does anyone have any idea why this is and could they put me right?

Thanks Stef

2ps · Accepted Answer · 2016-11-23 22:16:44Z

2

I think you just forgot to assign $scope.examples, so the ng-repeat had no data to loop over:

angular.module('my_app')

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) {

    $scope.example = exampleFactory.query({
        })
        .$promise.then(
            function (response) {
                var examples = response;
                $scope.message = examples;
                $scope.examples = examples.examples; // I may be reading the JSON wrong here.
            },
            function (response) {
                $scope.message = "Error: " + response.status + " " + response.statusText;
            }
        );

}])

answered Nov 23, 2016 at 22:16

2ps

16k2 gold badges34 silver badges53 bronze badges

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

1 Comment

Stef Over a year ago

Thanks 2ps - tried that but it didn't work - I eventually sorted it - see next response for details as i couldn;t get the code to display correctly in this reply :-)

alphapilgrim · Accepted Answer · 2016-11-23 22:21:38Z

1

I'd suggest using a factory as you can get the methods inside the factory before the factory has been returned. It's the revealing module pattern, good read here if your interested JavaScript Design Patterns

angular
  .module('my_app')
  .controller('ExampleController', ['$scope', 'exampleFactory',
    function($scope, exampleFactory) {
      function getMessageList() {
        exampleFactory
          .getMessages()
          .then(function(messages) {
            $scope.examples = messages;
          })
          .catch(function(response) {
            $scope.message = "Error: " + response.status + " " + response.statusText;
          });
      }
      getMessageList();

    }
  ])
  .factory('exampleFactory', ['$http', 'baseURL',function($http, baseURL) {
      function getMessages() {
        return $http
          .get(baseURL)
          .then(function(jsonResp) {
            return jsonResp.data;
          })
          .catch(function(error) {
            //handle error if needed
            console.log(error);
          });
      }
      return {
        getMessages: getMessages
      };
    }
  ]);

<p>Test outside repeat: {{examples}}</p>

<ul>
  <li ng-repeat="example in examples">
    <p>Test in repeat: {{message}}</p>
    <p>{{example.name}}</p>
    <p>{{example.description}}</p>
  </li>
</ul>

answered Nov 23, 2016 at 22:21

alphapilgrim

3,97510 gold badges33 silver badges64 bronze badges

1 Comment

Stef Over a year ago

Thanks alphapilgrim - I eventually sorted it (see above). Also, am using $resource as opposed to $http so I wouldn't go with your solution but your comments are useful and appreciated ;-) Also, cheers for the link, that's tomorrow's reading sorted ;-)

Stef · Accepted Answer · 2016-11-23 22:31:12Z

0

Eventually sorted it by changing controller as follows:

.controller("ExampleController", function($scope, exampleFactory) {
  exampleFactory.query(function(response) {
      $scope.examples = response;

      $scope.examples.$promise.then(
          function (response) {
              var examples = response;
              $scope.message = examples;
          },
          function (response) {
              $scope.message = "Error: " + response.status + " " + response.statusText;
          }
      );

  });
});

Probably a little bit clunky and it would be nice to be able to reduce it further but as I'm very new to all this I'll go with this for now.

answered Nov 23, 2016 at 22:31

Stef

3691 gold badge5 silver badges24 bronze badges

Collectives™ on Stack Overflow

Trying to access json-server data via a controller and factory in angular

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related