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 = '',
    key = 'API_KEY'
    mode = 'movie/popular';
$http.jsonp(url + mode + key)
.success(function(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 ...


   "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 " and it works now, maybe it's just an API bug. Thanks guys!


source to share

1 answer

The correct endpoint for the MovieDB API (version 3) is

. When using JSONP, you must provide a callback. Below is a snippet of working code. It's quite detailed, like sake.


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

app.controller('MyCtrl', function($scope, $http) {
    var base = '';
    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);



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


The result will look like

enter image description here

The linked plunker is here



All Articles