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


Parsing Treehouse Profile JSON

Hey all.

I've been building a personal website and I want to display my Treehouse badges in real time using Ajax. I've started off using a widget done by Riley Hilliard demo'd here: http://codepen.io/rileyhilliard/pen/BovGu

Among other things, I'm looking to add filter functionality to the widget using a jquery plugin. To do this I want to add a class name to each <li> which contains the badge image and a link for each badge.

The course title for each badge can be found at: treehouseObj.badges[i].courses[0].title

Where treehouseObj is set equal to the incoming JSON and i is the position of the badge record in the badges array.

When I try something like: treehouseObj.badges[50].courses[0].title in the console, it returns the course title without a problem. However I'm getting "Uncaught TypeError: Cannot read property 'title' of undefined" when I try to access the property within the each loop within the Ajax statement.

The code from the original example was:

$(document).ready(function () {

var e = "rileyhilliard",
    t = "http://teamtreehouse.com/" + e + ".json",
    n = $("#badges"),
    r = [],
    i = 0;

  $.getJSON(t, function (e) {

    var t = e.badges;

    $.each(t, function (e, t) {
      r += '<li><a href="' + t.url + '" target="_blank"><img src="' + t.icon_url + '" alt="' + t.name + '" title="' + t.name + '"/></a></li>';


    $("#treehouse-count").append('I have earned ' + i + ' badges at Treehouse!');

Within the $.each statement, I should be able to do something like:

r += '<li class=" ' + t.courses[0].title + ' ">...

But this is returning the error.

Using t.courses[0] does in fact return the object containing the title and 2 other pieces of information, but I cannot access the title property.

Any help is appreciated! :)

3 Answers

Ariel Guzman
Ariel Guzman
7,872 Points

Mark Davidson, Please disregard my last comment. i checked your json and found the problem.

The first badge of your json is the "Newbie" badge, which does not have a title string. Meaning that if you call json.badges[0].courses[0].title you will get Cannot read property 'title' of undefined.

But if you call json.badges[1].courses[0].title you will get "Build a Simple Ruby on Rails Application".

Ariel Guzman
Ariel Guzman
7,872 Points

The "title" string you are trying to access seems to be part of the JSONArray "courses", not "badges".

"badges": [
"id": 159,
"name": "Website Basics",
"url": "http://teamtreehouse.com/library/build-a-simple-website/website-basics",
"icon_url": "https://wac.A8B5.edgecastcdn.net/80A8B5/achievement-images/badges_WebsiteIsland1_Stage1.png",
"earned_date": "2014-02-24T03:49:39Z",
"courses": [
"title": "Build a Simple Website",
"url": "http://teamtreehouse.com/library/build-a-simple-website",
"badge_count": 1
"title": "Website Basics",
"url": "http://teamtreehouse.com/library/build-a-simple-website/website-basics",
"badge_count": 1

First try to access the "courses" array, and then get the title.

Ah okay that makes more sense. I should probably be in the habit of checking a property exists before using it :)

getCategory = function(courses) {
    course = (courses.length > 0) ? courses[0].title : 'no-category';
    return course;
r += '<li class="' + getCategory(t.courses) + ...

Passed the courses array to a function which checks that it has data and uses the title if so, if not "no-category" as a fallback class. (getCategory isn't necessary here but I'll be using it to group certain courses into categories later)