AngularJS - Error with MovieDB API
So, I am currently working on a web application using the MovieDB API and this is an AngularJS application. I just need to get all popular movies, but it doesn't seem 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);
});
Instead, all I have is an error from Chrome: Uncaught SyntaxError: Unexpected token: and var status is '404'. However, I can see the list in the Chrome Inspector ...
those.
{
"page" : 1,
"results" : {
"adult" : false,
"id" : 82992,
...
}
And when I try to use the normal "$ http.get" query, it returns a cross-domain problem ... Do you have an idea? I don't see my mistake ...
EDIT: It works with a different server. I changed the url to " http://private-18cc-themoviedb.apiary.io/3/ and it works now, maybe it's just an API bug. Thanks guys!
source to share
The correct endpoint for the MovieDB API (version 3) is http://api.themoviedb.org/3
. When using JSONP, you must provide a callback. Below is a snippet of working code. It's quite detailed, like 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>
The result will look like
The linked plunker is here http://plnkr.co/edit/gwB60A
source to share