Data isn't rendering in angular view

Question

When I try to access test json data, it retrieves the data. however it won't display within my template

app.js:

var listController = angular.module('ngAppListDemo', []); 

listController.controller('listControl', ['$scope', '$http', function ($scope, $http){
   $scope.list = [];
    var urlTest = 'https://mysafeinfo.com/api/data?list=englishmonarchs&format=json'; // url 
    //var testData = 'http://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json'; // .json format
    $http({method: 'GET', url: urlTest}).success(function(data, status, headers, config) {
        $scope.list = data;
        console.log(data);         
    });
}]);

index.html

 <div ng-app="ngAppListDemo">
    <div ng-controller="listControl">
        <div class="row" ng-repeat="item in list">
          <p>{{item.nm}}</p>
        </div><!-- end list item -->
      </div>
    </div>

data looks like this within url:

[
  {
    "nm": "Edmund lronside",
    "cty": "United Kingdom",
    "hse": "House of Wessex",
    "yrs": "1016"
  },
  {
    "nm": "Cnut",
    "cty": "United Kingdom",
    "hse": "House of Denmark",
    "yrs": "1016-1035"
  },
  {
    "nm": "Harold I Harefoot",
    "cty": "United Kingdom",
    "hse": "House of Denmark",
    "yrs": "1035-1040"
  }
]

It's repeating within the template fine. but the data inbetween the <p> tags {{ item.nm }} doesn't show. What am I missing?

Edit: It appears that ng-binding is missing once rendering.

You really shouldn't use success anymore. docs.angularjs.org/api/ng/service/$http#deprecation-notice — Matthew Green
– Matthew Green, Commented Jan 22, 2016 at 20:41
have you tried putting the curlys in quotes? so "{{item.nm}}". — ruby_newbie
– ruby_newbie, Commented Jan 22, 2016 at 20:41
@MatthewGreen good call. how would you suggest using it? i replaced with .then(function successCallback(response) { ... however, its still not replacing correctly. — Modelesq
– Modelesq, Commented Jan 22, 2016 at 20:52

AlainIb · Accepted Answer · 2016-01-22 22:00:35Z

2

working example : http://plnkr.co/edit/DeO5fmub16hXutOmylBu?p=preview

try this

var listController = angular.module('ngAppListDemo', []); 

listController.controller('listControl', ['$scope', '$http', function ($scope, $http){
   $scope.list = [];
    var urlTest = 'https://mysafeinfo.com/api/data?list=englishmonarchs&format=json'; // url 
    //var testData = 'http://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json'; // .json format


    $http({
         method: 'GET',
         url: urlTest
      }).then(function successCallback(response) {
          // the data is in response.data (or data.data using your old paramater name)  not data directly   
          $scope.list = response.data;
           console.log(response.data); 
           // update 1
           $scope.$apply();
      }, function errorCallback(response) {

      });
}]);

// update 1: try a $scope.$apply() to force the view to update

edited Jan 22, 2016 at 22:00

answered Jan 22, 2016 at 20:55

AlainIb

4,6157 gold badges42 silver badges67 bronze badges

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

4 Comments

Modelesq Over a year ago

Thank you for taking the time to post this. It obviously works. It must be something on my end thats preventing me from displaying it.

Modelesq Over a year ago

ng-binding is missing from template render

Modelesq Over a year ago

I'm not sure why it's not working without it. But that's the only work around thats worked for me. :\

AlainIb Over a year ago

try a $scope.$apply()

Abhishek Jha · Accepted Answer · 2016-01-22 21:07:27Z

2

Seems to be working fine. Created a demo using same html

<div ng-app="ngAppListDemo">
<div ng-controller="listControl">
    <div class="row" ng-repeat="item in list">
      <p>{{item.nm}}</p>
    </div><!-- end list item -->
  </div>
</div>

May be your css would be having the font and back ground colour same

answered Jan 22, 2016 at 21:07

Abhishek Jha

1,0152 gold badges12 silver badges24 bronze badges

5 Comments

Modelesq Over a year ago

I thought so to. Or maybe conflicting js. But theres literally nothing inside the <p></p>. :\

Abhishek Jha Over a year ago

try {{list}} or {{item}} does it print anything?

Modelesq Over a year ago

Looks like it doesn't print either option.

Modelesq Over a year ago

ng-binding isn't there also.

Abhishek Jha Over a year ago

that means it is not rendering the curly braces {{}} itself. Then this could be issue of character encoding or try copying those braces from somewhere where code is working. Other than that I cant think, why it wouldnt work

Modelesq · Accepted Answer · 2016-01-22 21:43:26Z

0

After comparing dev inspection from answers with demos. I noticed that I was missing class="ng-binding".

I added :

 <span ng-bind="item.nm"></span>

https://docs.angularjs.org/api/ng/directive/ngBind

answered Jan 22, 2016 at 21:43

Modelesq

5,45220 gold badges64 silver badges89 bronze badges

1 Comment

AlainIb Over a year ago

ng-bind is for replacing the content of a html element. the data her are just string so no need to this directive

Collectives™ on Stack Overflow

Data isn't rendering in angular view

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related