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

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.

我目前正在网上学习一些AJAX和JSON,有人能告诉我我的代码有什么问题吗?我正在尝试在我的网页上加载项目,具体取决于单击的按钮和类别。

This is the JSON file content

这是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"
    }
]
]

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

这是我目前正在使用的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

I also tried with the $.ajax function!

我也试过$ .ajax函数!

3 个解决方案

#1

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

您的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"
        },
        .
        .
        .
    ]
}

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

更新1:正如charlietfl所提到的,您还需要将您的属性名称放在引号内。 (我已经更新了代码片段以反映这一点。)

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.

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

3 个解决方案

#1

更多相关文章

随机推荐