Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Blake Jackovitch
Blake Jackovitch
6,688 Points

Building with AngularJS and APIs callback=JSON_CALLBACK error

Hi there, I've been following the Building with AngularJS and APIs course however I seem to be misinterpreting. As the video instructs you to do so you are suppose elaborate on the call back by specifically specify callback. I've provided below what I am currently working with however as mentioned previously, I'm getting nothing. I believe at this point within the tutorial, the code should be rendering the API on the UI. as well, I am receiving a console error. See Console error below. Please feel free to reach out if there is not enough information provided to resolve the issue. Thanks guys

Resource interpreted as Script but transferred with MIME type text/html: "http://api.dribble.com/shots/popular?callback=angular.callbacks._0".

HTML:

```<!DOCTYPE html> <html lang="en" ng-app="dribble"> <head> <meta charset="utf-8"> <title>Dribble Showcase</title> <!-- styles --> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/app.css"> </head> <body ng-controller="AppCtrl"> <div class="container"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar-inner"> <a class="brand" href="#/">Dribble</a> <ul class="nav"> </ul> </div> </div> <div ng-controller="ShotsListCtrl"> </div> </div>

<!-- scripts -->
<script type="text/javascript" src="angular/angular.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</body> </html>

Javascript: found in my controller.js

'use strict';
/* Globally accessing this
function AppCtrl ($scope) {
    $scope.name = "World";
    $scope.updateName = function () {
        $.scope.name = "World from function";
    }
}*/
var controllers = angular.module('dribble.controllers', [])
//Modules 
controllers.controller('AppCtrl', function($scope){
    $scope.name = "module";
});

controllers.controller('ShotsListCtrl', function($scope, $http){
    $scope.list;

$http.jsonp('http://api.dribble.com/shots/popular?callback=JSON_CALLBACK').then(function(data){
    console.log(data);
})

})```

4 Answers

Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points

Mark McIntyre Andrew Chalkley Andrew Stevens Sara Norkelun Brandon Greene Damian Cutillo

Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points

the last bit of code or the third code snip can be found currently in my app.js

Thank you guys -Blake

Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points

never mind, I got it. spelt dribbble wrong and used two b instead of the needed three

Tech Solutions
Tech Solutions
6,077 Points
Tech Solutions
Tech Solutions
6,077 Points

Thanks I was getting the same error and it was for the exact same reason, missing out the 3rd 'b' in dribbble on the url