CODEWITHSUNDEEP
jsonangularjs
Peter Boomsma
Peter Boomsma

Reputation: 9808

console.log of scope gets undefined

I'm trying to acces data from a JSON output by logging it in the console but the console says the element is undefined.

I have a controller which has two functions. Both do a http request from TheMovieDB.org database.

The first function does a search query corresponding to the input of the user. This works fine, also the console.log works here and I see all the objects returned.

.controller('searchCtrl', [

  '$scope', 'movieService', 'createMovie', 'removeMovie', '$http', function($scope, movieService, createMovie, removeMovie,  $http) {

    $scope.search = function() {

      var base = 'http://api.themoviedb.org/3';
      var service = '/search/movie';
      var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
      var search = $scope.searchquery
      var callback = 'JSON_CALLBACK'; // provided by angular.js
      var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

      $http.jsonp(url,{ cache: true}).
        success(function (data, status, headers, config) {

          if (status == 200) {
            $scope.movieList = data.results;
            console.log($scope.movieList)
          } else {
            console.error('Error happened while getting the movie list.')
          }

        }).
        error(function (data, status, headers, config) {
          console.error('Error happened while getting the movie list.')
        });
    }

I then display the results of that search in a template,

%ul#showresults
  %li.search_results{"ng-repeat" => "movie in movieList | orderBy:'-release_date'"}

    .addmovie{"ng-click" => "addMovie()"}
      %span
        Add Movie
    %img.poster{"ng-src" => "http://image.tmdb.org/t/p/w500/{{ movie.poster_path }}"}
    %span.movieID
      {{ movie.id }}
    %span.title
      {{ movie.original_title }}
    %span.release
      {{ movie.release_date }}

As you can see I have elemnt with the addMovie() function. When a user clicks on this element the addMovie function in the same controller as the search function gets triggerd.

    $scope.addMovie = function() {

      'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&append_to_response=releases'
      // Search for release dates using the ID.
      var base = 'http://api.themoviedb.org/3/movie/';
      var movieID = $(event.currentTarget).parent().find('.movieID').text()
      var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
      var append_to_response = '&append_to_response=releases'
      var callback = 'JSON_CALLBACK'; // provided by angular.js
      var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&callback=' + callback;

      $http.jsonp(url,{ cache: true}).
        success(function (data, status, headers, config) {

          if (status == 200) {
            $scope.movieListID = data.results;
            console.log('succes!' + $scope.movieListID)
          } else {
            console.error('Error happened while getting the movie list.')
          }

        }).
        error(function (data, status, headers, config) {
          console.error('Error happened while getting the movie list.')
        });

    };

It takes the ID from the movie the user wants to add and create a http request which does happen. It shows the correct link in the network tab. But the console log says succes! undefined. The succes is for the getting the JSON data and the undefined is the scope.MovieListID.

So the question is, why does this console.log('succes!' + $scope.movieListID) become undefined?

Upvotes: 0

Views: 385

Answers (1)

Faizan
Faizan

Reputation: 383

I have opened the api link in browser. The JSON returned does not have root key results.

Change

    $scope.movieListID = data.results;

to

    $scope.movieListID = data;

Upvotes: 2

Related Questions