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 Jesus Mendoza
Jesus Mendoza
23,289 Points

What's wrong with my code?

I'm trying to get items with a category selected using jQuery and JSON but it dosn't do anything.

$('.projectbutton').click(function(){
$('.projectbutton').removeClass('active');
$(this).addClass('active');
var projectcategory = $(this).attr('project');
alert(projectcategory);

$.getJSON("http://mendozajesus.com/testjson/test.json", function(response) {
    var projectHTML = '<div class="project">';

    $.each(response.item, function(i, project) {
        if (project.category == projectcategory) {
            projectHTML += '<img src=' + project.image + '/>';
            projectHTML += '<div class="projectdescription"><h1>' + project.title;
            projectHTML += '</h1><p>' + project.description + '</p>';
            projectHTML += '<img src=' + project.image + '/></div>';
        }
    }); //end each

    projectHTML += '</div>';
    $('#projectcontainer').html(projectHTML);
}); // end getJSON
}); // end click

Here is the JSON

[
    {
        "item": {
            "title": "Proyecto 1",
            "description": "El siguiente video fue hecho para la empresa X usando HTML y CSS.",
            "image": "img/proyecto1.jpg",
            "category": "web"
        }
        "item": {
            "title": "Proyecto 2",
            "description": "El siguiente video fue grabado para la empresa X usando Illustrator y Photoshop.",
            "image": "img/proyecto2.jpg",
            "category": "design"
        }
        "item": {
            "title": "Proyecto 3",
            "description": "El siguiente video fue grabado para la empresa X usando la camara Y.",
            "image": "img/proyecto3.jpg",
            "category": "video"
        }
    }
]

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi there.

The first thing to check for is that the browser is linking correctly to your JavaScript files. Have you got into Google Chrome's DevTools to check that this is the case?

Hope this helps :)

Jesus Mendoza
Jesus Mendoza
23,289 Points

Yeah that's the first thing I did!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Would you be able to give a link to the code so we can have a look at it? :-)

Jesus Mendoza
Jesus Mendoza
23,289 Points

Check it out, it's just plain html