Cannot obtain proper data in angular JS

Question

I have done the following in AngularJS. The data is obtained from the URL mentioned. If you open the URL, you can see the response it provides.

However, I am not able to obtain the title inside HTML via angularjs. I am getting a blank result. What am I doing wrong? Has it something to do with JSON encoding?

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script>
    function ActivitiesListCtrl($scope) {
  $http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
    $scope.mydata = data;
  }
}
 </script>
  </head>
  <body ng-controller="ActivitiesListCtrl">
  <h1>Movie Name</h1>
  <ul>
   <li ng-repeat="data in mydata">
     {{data.Title}}
   </li>
  </ul>
</body>
</html>
</html>

Maurice · Accepted Answer · 2014-01-01T12:26:27.433

There is quite a lot wrong with your code :-( Syntax errors, not injecting $http, the response is a single movie instead of a collection.

Try the following.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script>
    function ActivitiesListCtrl($scope, $http) {
  $http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
    $scope.mydata = data;
  });
}
 </script>
  </head>
  <body ng-controller="ActivitiesListCtrl">
  <h1>Movie Name</h1>
    {{mydata.Title}}
</body>
</html>

Example with a collection:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script>
    function ActivitiesListCtrl($scope, $http) {
  $http.get('http://www.omdbapi.com/?s=True%20Grit').success(function (data) {
    $scope.mydata = data;
  });
}
 </script>
  </head>
  <body ng-controller="ActivitiesListCtrl">
  <h1>Movie Name</h1>
    <ul> 
       <li ng-repeat="data1 in mydata.Search"> {{data1.Title}} </li> 
    </ul>
</body>
</html>

Thanks this works. But if the url is http://www.omdbapi.com/?s=True%20Grit, I still cannot iterate with the following code.

{{data1.Title]}}
Any idea why? — manoj, Jan 01 '14 at 12:18
The actual data is in an array contained in a Search property. See the second example above. — Maurice, Jan 01 '14 at 12:25

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

I created a working plunker mistakes including: not creating an app module, not injecting $http, trying to iterate over "data" which your scope doesn't know about - since you have "mydata" in your scope. and iterating over an object the wrong way. (it would be correct to iterate like this if you were getting an array of objects) see this answer for details

edited May 23 '17 at 12:11

Community

1
1

answered Jan 01 '14 at 11:41

alonisser

11,542
21
85
139

Thanks this works. But if the url is http://www.omdbapi.com/?s=True%20Grit, I still cannot iterate with the following code.
- {{data1.Title]}}
– manoj Jan 01 '14 at 12:23

Cannot obtain proper data in angular JS

2 Answers2