Parsing Treehouse Profile JSON

Question

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>';
      i++;
    });

    n.append(r);

    $("#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! :)

Answer 1 · 2014-06-20T23:32:42Z

June 20, 2014 11:32pm

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".

Answer 2 · 2014-06-20T23:14:41Z

June 20, 2014 11:14pm

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.

Answer 3 · 2014-06-20T23:58:56Z

June 20, 2014 11:58pm

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)

Thanks!

Welcome to the Treehouse Community

Looking to learn something new?

Mark Davidson

Mark Davidson

Parsing Treehouse Profile JSON

3 Answers

Ariel Guzman

Ariel Guzman

Ariel Guzman

Ariel Guzman

Mark Davidson

Mark Davidson

Ariel Guzman

Ariel Guzman