使用jQuery和AJAX從JSON文件加載數據

Question

我目前正在在線學習一些AJAX和JSON，有人可以告訴我我的代碼有什么問題嗎？ 我正在嘗試根據單擊哪個按鈕和類別在網頁上加載項目。

這是JSON文件的內容

[
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"
    }
]
]

這是我當前正在使用的jQuery代碼。

$('.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

我也嘗試了$ .ajax函數！

Answer 1

您的JSON無效。 如果要具有屬性（如item ），則需要放入JSON對象文字中：

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

注意花括號（ {} ）而不是方括號（ [] ）。

---

更新1：正如charlietfl所述，您還需要將屬性名稱也放在引號內。 （我更新了代碼段以反映這一點。）

更新2：您應使用JSONLint之類的JSON驗證 程序來驗證JSON並確保其有效，然后再嘗試在JavaScript中進行解析。

Answer 2

根據我的評論，格式化已關閉，但否則，您的選擇正確了。

// 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"
        }
    ]
}

您可以在此處檢查JSON： http ： //jsonlint.com/

Answer 3

您的JSON具有奇怪的結構。 它幾乎可以像描述的那樣工作，只是缺少一個“ {}”，但是訪問它的方式有點奇怪。

您可以查看以下小提琴示例：

小提琴

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);