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 ：您应该使用JSON Validator等JSONLint来验证您的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有一个奇怪的结构。它几乎可以像所描述的那样只缺少一个＆＃34; {}＆＃34;但访问它的方式有点奇怪。

你可以查看这个小提琴样本：

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

使用jQuery和AJAX从JSON文件加载数据

3 个答案: