Question

我正在尝试从电影API（TMDB API）获取数据，并希望在我的html视图页面中显示电影的详细信息。我得到了API的响应，但我无法弄清楚处理对象数组数组中的响应的方法。

这是我的回复

{
  "page":1,
  "total_results":1,
  "total_pages":1,
  "results":
   [{
     "vote_count":779,
     "id":20453,
     "video":false,
     "vote_average":7.7,
     "title":"3 Idiots",
     "popularity":1.963226,
     "poster_path":"\/wbE5SRTZFtQxgj2nIo4HJpQDk0k.jpg",
     "original_language":"hi",
     "original_title":"3 Idiots",
     "genre_ids":[18,35,10749],
     "backdrop_path":"\/6LnwpadKFRrqam7IfBAi3lNTz6Y.jpg",
     "adult":false,
     "overview":"In the tradition of “Ferris Bueller’s Day Off” comes this  
      refreshing comedy about a rebellious prankster with a crafty mind anda 
      heart of gold. Rascal. Joker. Dreamer. Genius... You've never met a 
      college student quite like \"Rancho.\" From the moment he arrives at 
      India's most prestigious university, Rancho's outlandish schemes turn 
      the campus upside down—along with the lives of his two newfound best 
      friends. Together, they make life miserable for \"Virus,\" the 
      school’s uptight and heartless dean. But when Rancho catches the eye 
      of the dean's sexy daughter, Virus sets his sights on flunking out the 
     \"3 idiots\" once and for all.",
     "release_date":"2009-12-23"
  }]
}

我想使用angularjs在我的html页面中显示结果中的概述和其他详细信息，但我无法弄清楚如何做到这一点？

这是我的js和html代码段。我尝试使用另一个API，但现在它变得私有，所以我必须更改API。

function getItems(){

			$http({method:'GET',url:"https://api.themoviedb.org/3/search/movie?api_key=9a1750d469929884b1c959126ec22c83&query=" + $scope.search})
			.then(function (response) {
				// body...
				$scope.movies = response.data.results;
				console.log(response.data.results);
			});

<div class="movie-details col-sm-8" >
	<ul class="details">
		<li><img ng-src="{{movies.Poster=='N/A' && 'http://placehold.it/150x220&text=N/A' || movies.poster_path}}" class="movie-poster thumbnail"><a class="movie-title" href="http://www.imdb.com/title/{{movies.imdbID}}" target="_blank">{{movies.original_title}}</a>, {{movies.Year}}  <span class="reviews"><a href="#Movie Reviews">Reviews | </a><a href="#Add Review">Add your own review</a></span></li>
		<li><span>Released On: </span>{{movies.results}}</li>
		<li><span>Runtime: </span>{{movies.Runtime}}</li>
		<li><span>Genre: </span>{{movies.Genre}}</li>
		<li><span>Director: </span>{{movies.Director}}</li>
		<li><span>Writers: </span>{{movies.Writer}}</li>
		<li><span>Actors: </span>{{movies.Actors}}</li>
		<li>{{movies.overview}}</li>
		<li><span>Language: </span>{{movies.Language}}</li>
		<li><span>Country: </span>{{movies.Country}}</li>
		<li><span>Awards: </span>{{movies.Awards}}</li>
		<li><span>IMDB Ratings: </span>{{movies.imdbRating}}</li>
	</ul>
	<br>
	<div>
	 <a class="links" href="https://www.youtube.com/results?search_query={{movies.original_title}}" target="_blank">Watch Trailers!</a>
	|<a class="links" href="https://subscene.com/subtitles/title?q={{movies.Title}}&l=" target="_blank">Get Subtitles!</a>
	|<a class="links" href="http://www.amazon.in/s/ref=nb_sb_noss_1?url=search-alias%3Ddvd&field-keywords={{movies.Title}}" target="_blank">Buy Online!</a>
	</div>
</div>

Answer 1

您必须使用ng-repeat才能在html中显示数据，进一步更正您在html上绑定的属性名称。（例如：结果发布到release_date）

（请参阅console log data的此屏幕截图）

示例DEMO：

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('ExampleController', ExampleController);

function ExampleController($scope, $http) {
  function callapi() {
    $http({
      method: 'GET',
      url: 'https://api.themoviedb.org/3/search/movie?api_key=9a1750d469929884b1c959126ec22c83&query=3%20idiot'
    }).then(function(response) {
      console.log(response.data.results[0]);
      $scope.moviesData= response.data.results;
    })
  }
  callapi();
}

＆＃13;

<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="myApp" ng-controller="ExampleController">
  <ul ng-repeat="movies in moviesData">

    <li><span>Released On: </span>{{movies.release_date}}</li>
    <li><span>Runtime: </span>{{movies.Runtime}}</li>
    <li><span>Genre: </span>{{movies.Genre}}</li>
    <li><span>Director: </span>{{movies.Director}}</li>
    <li><span>Writers: </span>{{movies.Writer}}</li>
    <li><span>Actors: </span>{{movies.Actors}}</li>
    <li>{{movies.overview}}</li>
    <li><span>Language: </span>{{movies.original_language}}</li>
    <li><span>Country: </span>{{movies.Country}}</li>
    <li><span>Awards: </span>{{movies.Awards}}</li>
    <li><span>IMDB Ratings: </span>{{movies.imdbRating}}</li>
    <hr>
  </ul>

</div>

＆＃13;

Answer 2

看起来您没有完全按照预期使用结果。例如，您有movies.results，但您已将$scope.movies设置为返回results属性。

确保您使用的是设置电影的results媒体资源中的属性。

例如，您可以通过在HTML

中调用{{movies.overview}}来访问概述

如何使用angualrjs在html中打印数组对象数组

2 个答案: