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

General Discussion

Daniel Botta
Daniel Botta
17,956 Points
Posted by Daniel Botta
Daniel Botta
17,956 Points

Treehouse Profile JSON error

I am working on making an AngularJS application that displays all of my badges and progress on treehouse.

I have no problem writing the ajax call using $http in angular and receiving data. I am currently trying to display all of the badge images on a page and have successfully done so except... I am getting an error message in the dev tools console that says:

Failed to load resource: the server responded with a status of 404 (Not Found)

I am getting this error for the icon_url %7B%7Bbadge.icon_url%7D%7D

It seems that one of the image urls are incorrect. Is it possible that I am getting this error due the the code I have written or could this be an error in the JSON that I am receiving from treehouse?

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hey, Daniel. I'm not sure what's going on with that. I've made a pen here that shows all my badges displayed with no errors. I tried your profile name in there as well, and everything worked fine. Strange. My pen is using jQuery to retrieve the JSON data, but it should work the same.

Daniel Botta
Daniel Botta
17,956 Points
Daniel Botta
Daniel Botta
17,956 Points

I figured it out! I was using: 

<img src="{{ badge.icon.url }}" alt="{{ badge.name }} badge image"/>

This was still returning the images and displaying them but with the error.

I switched the src attribute to ng-src like this and it worked:

 <img ng-src="{{ badge.icon_url }}" alt="{{ badge.name }} badge image"/>