javascript - 如何使用angularjs在html中打印数组对象数组

Question

我正在尝试从电影 API (TMDB API) 获取数据，并希望在我的 html View 页面中显示电影的详细信息。 我收到了来自 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 尝试了这个，但现在它变成了私有(private)，所以我必须更改 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上绑定(bind)的属性名称。 (例如:发布日期的结果)

(请参阅控制台日志数据的屏幕截图)

示例演示:

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();
}

<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>