javascript - 使用 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提到的，您还需要将属性名称放在引号内。 (我已经更新了代码片段以反射(reflect)这一点。)

更新2:您应该使用JSON Validator如JSONLint在尝试用 JavaScript 解析 JSON 之前验证您的 JSON 并确保它是有效的。