Loading data from a JSON file using jQuery and AJAX

Question

I'm currently studying some AJAX and JSON online, can someone tell me what's wrong with my code? I'm trying to load items on my web page depending on which button is clicked and the category.

This is the JSON file content

[
item: [
    {
        title: "Proyecto 1",
        description: "Este proyecto fue realizado para la empresa X usando la tectnologia Y.",
        image: "img/proyecto1.jpg",
        category: "web"
    },
    {
        title: "Proyecto 2",
        description: "Este proyecto fue realizado para la empresa X usando los programas X y Y.",
        image: "img/proyecto2.jpg",
        category: "design"
    },
    {
        title: "Proyecto 3",
        description: "El siguiente video fue grabado para la empresa X usando la camara Y.",
        image: "img/proyecto3.jpg",
        category: "video"
    }
]
]

And this is the jQuery code I'm currently using.

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

$.getJSON("test.json", function(response) {
    var projectHTML = '<div class="project">';

    $.each(response, 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

I also tried with the $.ajax function!

Answer 1

Your JSON is invalid. If you want to have properties (like item ) you need to put in inside an JSON object literal:

{
    "item": [
        {
            "title": "Proyecto 1",
            "description": "Este proyecto fue realizado para la empresa X usando la tectnologia Y.",
            "image": "img/proyecto1.jpg",
            "category": "web"
        },
        .
        .
        .
    ]
}

Notice the curly braces ( {} ) instead of brackets ( [] ).

---

UPDATE 1: As charlietfl mentioned, you need to put your property names inside of quotes as well. (I've updated the snippet to reflect this.)

UPDATE 2: You should use a JSON Validator such as JSONLint to validate your JSON and ensure that it is valid before trying to parse it in JavaScript.

Answer 2

Following from my comment, the formatting is off, but otherwise, you're on the right track.

// Converted to an Object with a single property, "item", which holds
// an array of objects
{
    "item": [
        {
            "title": "Proyecto 1",
            "description": "Este proyecto fue realizado para la empresa X usando la tectnologia Y.",
            "image": "img/proyecto1.jpg",
            "category": "web"
        },
        {
           "title": "Proyecto 2",
           "description": "Este proyecto fue realizado para la empresa X usando los programas X y Y.",
           "image": "img/proyecto2.jpg",
           "category": "design"
        },
        {
           "title": "Proyecto 3",
           "description": "El siguiente video fue grabado para la empresa X usando la camara Y.",
           "image": "img/proyecto3.jpg",
           "category": "video"
        }
    ]
}

You can check your JSON here: http://jsonlint.com/

Answer 3

Your JSON has a strange structure. It can almost work as described only missing one "{}" but the way to access it is a bit weird.

You can check out this fiddle sample:

fiddle

js:

var test = [{item: [{
    title: "Proyecto 1",
    description: "Este proyecto fue realizado para la empresa X usando la tectnologia Y.",
    image: "img/proyecto1.jpg",
    category: "web"
}, {
    title: "Proyecto 2",
    description: "Este proyecto fue realizado para la empresa X usando los programas X y Y.",
    image: "img/proyecto2.jpg",
    category: "design"
}, {
    title: "Proyecto 3",
    description: "El siguiente video fue grabado para la empresa X usando la camara Y.",
    image: "img/proyecto3.jpg",
    category: "video"
}]}];

var projectHTML = '<div class="project">';

    $.each(test[0].item, function(i, project) {
        if (true) {
            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);