Can’t read Json Data form AngularJS service

Question

Hi,

I’m new to AngularJS and I’ve been struggling to read some Json data form AngularJS service but to no avail!, can someone help me?

The AngularJS service:

  (function () {
  'use strict';

  angular.module('myService').service('myDataService', myDataService);

  myDataService.$inject = ['$q'];

  function myDataService($q) {
    return {
      getMyData: getMyData
    };

    function getMyData() {
      return $q.when({
        "data": [{
          "company": "ABC",
          "date": "25/09/2015",
          "hrData": [{
            "name": "Mark",
            "dept": "891 2 1",
            "empId": 77
          }, {
            "name": "James",
            "dept": "400 1 1",
            "empId": 340
          }, {
            "name": "Sam",
            "dept": "393 1 1",
            "empId": 220
          }, {
            "name": "Kumar",
            "dept": "M20 1 0",
            "empId": -287
          }, {
            "name": "Ric",
            "dept": "L21 2 1",
            "empId": 347
          }]
        }, {
          "company": "XYZ",
          "date": "25/09/2015",
          "hrData": [{
            "name": "Vijay",
            "dept": "664 2 1",
            "empId": 164
          }, {
            "name": "Judy",
            "dept": "UNKNOWN",
            "empId": null
          }, {
            "name": "Jak",
            "dept": "834 1 1",
            "empId": 423
          }]
        }]
      })
    }
  }
    })();

The code I'm using to read data form the service:

<!doctype html>
<html ng-app="myPlanner">
  <head>
    <meta charset="utf-8">
    <title>statusAlertsWebclient</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body data-ng-controller="MainController as vm">
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ui-view>

    </div>

{{theData | json}}



    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- run `gulp inject` to automatically populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->

    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->

    <!-- build:tfnsw-info -->
    <!-- This section will be replased by the version number in package.json -->
    <!-- endbuild -->

  </body>

  <script>
    var app = angular.module('myPlanner', ['myService']);
    app.controller('MainController', function($scope, myDataService) {
    $scope.theData = myDataService.getMyData.data;
    });
</script>
</html>

Thanks in advance!

Am I wrong in saying that the getMyData() function is not executed at any point? + the promise issue pointed out by Robba already — IAmDranged
– IAmDranged, Commented Dec 20, 2016 at 6:18
possibly, as I'm getting 'TypeError: Object doesn't support property or method 'then'' after trying Robba's suggested solution! — Greg
– Greg, Commented Dec 20, 2016 at 9:33

Robba · Accepted Answer · 2016-12-20 09:32:13Z

1

The getMyData function returns a promise. You should use then() on it to wait for the result:

<script>
    var app = angular.module('myPlanner', ['myService']);
    app.controller('MainController', function($scope, myDataService) {
        myDataService.getMyData().then(function(data) {
            $scope.theData = data;
        });
    });
</script>

edited Dec 20, 2016 at 9:32

answered Dec 19, 2016 at 23:12

Robba

8,46413 gold badges52 silver badges80 bronze badges

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

2 Comments

charlietfl Over a year ago

check your syntax

Greg Over a year ago

Thanks Robba, after trying your solution now I have this error -->TypeError: Object doesn't support property or method 'then'

Collectives™ on Stack Overflow

Can’t read Json Data form AngularJS service

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related