Peter Koller Peter Koller - 26 days ago 20
AngularJS Question

AngularJS data not showing up on page

I have a little trouble with this AngularJS page, it is not showing the data that it should.

I just recently started to work with angular, so a pointer, or an advise is welcomed.

Here is the Factory, and the Controller:

var app = angular.module('mpDataApp', [])
.controller('MpMapController', MpMapController)
.factory('GetMpData', GetMpData)

function GetMpData($http) {
var data = [];
return {
getData: function () {
return $http.get('MpWatch/GetMpData').success(function (data, status, header, config) {
}).then(function (results) {
data = ParseMpResults(results.data.d);
return data;
})
},
};
}

function MpMapController(GetMpData) {
GetMpData.getData().then(function (data) {
angular.extend(this, {
mpData: data,
});
});
};


And here is the markup:

//ng-app declared higher in the markup
<div>
<div ng-controller="MpMapController as mp">
<ul >
<li>
Number of records: {{mp.mpData.length}}
</li>
<li ng-repeat="mps in mp.mpData" >
<p>{{mps.deviceId}}</p>
</li>
</ul>
</div>
</div>


And the problem is, during debug a can see that "mpData" has the correct data as what it should be showing. But the page is not displaying it, and no errors displayed. In Visual Studio, i can hover over "mpData" in the markup and it shows the data is present.

Debug Capture

Yet it's not displayed on the page.
Thanks in advance for any help, advise, or a pointer.

Peter

Answer

var app = angular.module('mpDataApp', [])
  .controller('MpMapController', MpMapController)
  .factory('GetMpData', GetMpData)

function GetMpData($http) {
  var data = [];
  return {
    getData: function() {
      return $http.get('MpWatch/GetMpData');
    },
  };
}

function MpMapController(GetMpData) {
  var mp = this;
  mp.mpData = [];
  GetMpData.getData().then(function(data) {
    mp.mpData = data

  });
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mpDataApp">
  <div ng-controller="MpMapController as mp">
    <ul>
      <li>
        Number of records: {{mp.mpData.length}}
      </li>
      <li ng-repeat="mps in mp.mpData">
        <p>{{mps.deviceId}}</p>
      </li>
    </ul>
  </div>
</div>

Comments