AngularJS - Error with theMovieDB's API

Question

So, currently i'm working on a web-app using theMovieDB's API, and it's an AngularJS application. I just need to get all popular films, but it doesn't seems to work ..

Here is my code :

var url = 'http://private-anon-7ac1c3824-themoviedb.apiary-mock.com/3/',
    key = 'API_KEY'
    mode = 'movie/popular';
$http.jsonp(url + mode + key)
.success(function(data) {
    alert(data);
}).error(function(data, status) {
    console.log(data, status);
});

In return, all I got is an error from Chrome : Uncaught SyntaxError: Unexpected token : , and the status var equals '404'. However, I can see the list in the Chrome Inspector ...

IE :

{
   "page" : 1,
   "results" : {
      "adult" : false,
      "id" : 82992,
      ...
}

And when I'm trying tu use a normal "$http.get" request, it returns a cross-domain problem ... Do you guys have an idea ? I can't see my mistake ...

EDIT : It seems to work with an other server. I changed the URL to ' http://private-18cc-themoviedb.apiary.io/3/ ' and it's working now, maybe it was just an error from the API. Thank you guys !

Answer 1

The correct MovieDB API (version 3) endpoint is http://api.themoviedb.org/3 . When using JSONP you should provide a callback. Below is working code snippet for you. It's quite elaborate for example's sake.

JavaScript

var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope, $http) {
    var base = 'http://api.themoviedb.org/3';
    var service = '/movie/popular';
    var apiKey = 'just_copy_paste_your_key_here';
    var callback = 'JSON_CALLBACK'; // provided by angular.js
    var url = base + service + '?api_key=' + apiKey + '&callback=' + callback;

    $scope.result = 'requesting...';

    $http.jsonp(url).then(function(data, status) { 
      $scope.result = JSON.stringify(data); 
    },function(data, status) {
      $scope.result = JSON.stringify(data);
    });
});

Template

<body ng-controller="MyCtrl">
  <h3>MovieDB</h3>
  <pre>{{ result }}</pre>
</body>

Result would be something like

在此输入图像描述

Related plunker here http://plnkr.co/edit/gwB60A

AngularJS - Error with theMovieDB's API

Question

1 answers

solution1
2 ACCPTED 2014-09-20 17:11:13

AngularJS - Error with theMovieDB's API

Question

1 answers

solution1 2 ACCPTED 2014-09-20 17:11:13

solution1
2 ACCPTED 2014-09-20 17:11:13