Difficult reading JSON and add ng-repeat list list is not completed $ http $$ HashKey

Question

I am new to Angle and am finding it very nice, my problem is this:

have a ng-repeat running straight when caught the data source of a variable javascript like this:

var alertsq = [  

{  
    "alert":"mediun",
    "nt":"28",
    "nu":"28",
    "no":"34",
    "dtini":"2012/Jul/23",
    "no":"3",
    "dtoc":"23/7/2012",
    "dtuo":"25/7/2012",
    "id":"227529436529033216",
    "msg":"Uh oh, this could be bad. Check the door lock vendor before you book you next hotel room: http://example.co/n56emZf2"
},
{  
    "alert":"mediun",
    "nt":"28",
    "nu":"28",
    "no":"34",
    "dtini":"2012/Jul/23",
    "no":"3",
    "dtoc":"23/7/2012",
    "dtuo":"25/7/2012",
    "id":"227529436529033216",
    "msg":"Uh oh, this could be bad. Check the door lock vendor before you book you next hotel room: http://example.co/n56emZf2"
}];

My controller that takes the variable alertsq and arrow on the scope is as follows:

app.controller("alertsController",function(){    
console.log(alertsq);
this.alerts =alertsq;
});

The cool thing is that it works and my list in *ng-repeat* is filled beautifully, but when I use the $http to load a JSON content of a file does not meet the same list: O controller code is so :

app.controller("alertsController", function($http,$scope){    

$http({
url: "data/alerts.json",
dataType: "json",
method: "GET",
headers: {
    "Content-Type": "application/json"
   } 
}).success(function(data){
$scope.alerts= data;
console.log($scope.alerts);
}).error(function(error){
console.log(data);
console.log(error);
});
});

The cool thing is that JSON is coming just right the browser output in the first case that the list is filled is as follows:

mainController controller.js:7


 [Object, Object, Object, Object, Object, Object, Object]
     0: Object
     $$hashKey:"object:4" 
     alert: "mediun"
     dtini: "2012/Jul/23"
     dtoc: "23/7/2012"    
     dtuo: "25/7/2012"
     id: "227529436529033216"
     msg: "Uh oh, this could be bad. Check the              
     door lock vendor before you book you next hotel room:       
     http://example.co/n56emZf2"
     no:"3"    
     nt: "28"
     nu: "28"__proto__: 
    Object1: 
    Object2:

And this is the console output when I seek for $http JSON:

 [Object, Object, Object, Object, Object, Object, Object]
 0: Object 
 alert: "mediun"
 dtini: "2012/Jul/23"
 dtoc: "23/7/2012"    
 dtuo: "25/7/2012"
 id: "227529436529033216"
 msg: "Uh oh, this could be bad. Check the              
 door lock vendor before you book you next hotel room:       
 http://example.co/n56emZf2"
 no:"3"    
 nt: "28"
 nu: "28"__proto__: 
Object1: 
Object2:

The detail is that the output obtained by the JSON via $http there is no attribute $$HashKey, and so the list in the ng-repeat is not filled :(, can anyone help me solve this?

Your $http-call looks like something from jQuery. This might give you some hints: http://stackoverflow.com/questions/12131659/from-jquery-ajax-to-angular-http — ippi, Dec 10 '14 at 00:33

score 0 · Accepted Answer · edited May 23 '17 at 10:33

When you updated your controller constructor function to include $http, you also added $scope. Changing from inferred to explicit dependency injection could be a problem for several reasons.

For example, the following html will display the alerts using your original controller.

<div ng-controller="CtrlOne as vm">
  <div ng-repeat="alert in vm.alerts">
    {{alert.alert}} - {{alert.msg}}
  </div>
</div>

However, your updated controller (in which you inject $scope explicitly) won't work with the "controller as" syntax. The controller alias must be removed to be compatible with your new controller constructor function:

<div ng-controller="CtrlOne">
  <div ng-repeat="alert in alerts">
    {{alert.alert}} - {{alert.msg}}
  </div>
</div>

Here's a demo of both methods: http://plnkr.co/edit/TrTFV36kQ8Llz3n2NChB?p=preview

Alternatively, you can remove $scope from the dependency injection, and go back to using this.alerts in the controller.

Difficult reading JSON and add ng-repeat list list is not completed $ http $$ HashKey

1 Answers1