how to print array object array in html using angualrjs

Question

I am trying to take data from a movie API (TMDB API) and want to display the details of the movie in my html view page. I got the response from the API but i cannot figure out the way to handle the response that is in array of an object array.

This is my response

{
  "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"
  }]
}

I want to display overview and other details that is in results in my html page using angularjs but i cannot figure out how to do that?

This is my js and html code snippet. Where i try this with another API but now it got private so i have to change the 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>

You need to use the object properties defined in your JSON result. For example, your markup accesses {{movies.Runtime}} etc. which is not in your result. The movies properties would be movies.vote_count, movies.id, movies.video ... etc — mhatch
– mhatch, Commented Jun 14, 2017 at 14:23
that was just only for example for the previous API and when i am trying movies.id it is not working — Isha Goyal
– Isha Goyal, Commented Jun 14, 2017 at 15:10
You should show the markup you are using for the response you posted. The two examples are not the same thing. Show the html where you are accessing movies.id — mhatch
– mhatch, Commented Jun 14, 2017 at 15:14

anoop · Accepted Answer · 2017-06-14 14:36:29Z

1

You have to use ng-repeat in order to show data in your html, further correct the property names that you bind on html. (for example: results to release_date)

(see this screenshot of console log data)

Sample DEMO :

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>

answered Jun 14, 2017 at 14:36

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Isha Goyal Over a year ago

Thanku for the help its working now...to access the properties of results i have to use ng-repeat.

joshsisley · Accepted Answer · 2017-06-14 14:26:02Z

0

It looks like you are not using the results exactly as you should be. For instance you have movies.results but you already set $scope.movies to your return results properties.

Make sure that you are using the properties within the results property that you set movies to.

For example you could access the overview by calling {{movies.overview}} in your HTML

answered Jun 14, 2017 at 14:26

joshsisley

3102 silver badges11 bronze badges

1 Comment

Isha Goyal Over a year ago

i tried {{movies.overview}} but it is not working, i have set $scope.movies to results property still it is not working

Collectives™ on Stack Overflow

how to print array object array in html using angualrjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related