CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
manoj
manoj

Reputation: 13

Cannot obtain proper data in angular JS

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>

Upvotes: 1

Views: 124

Answers (2)

Maurice
Maurice

Reputation: 27632

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>

Upvotes: 2

alonisser
alonisser

Reputation: 12068

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

Upvotes: 0

Related Questions