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

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

您似乎没有按照应有的方式使用结果。例如，您有 movies.results，但您已经将 $scope.movies 设置为 return results 属性。

确保您正在使用 results 属性中的属性来设置电影。

例如，您可以通过在 HTML

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

Answer 2

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

（参见 console log data 的屏幕截图）

示例演示：

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>

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

how to print array object array in html using angualrjs

html

javascript

arrays

response

angularjs