使用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：您应该使用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有一个奇怪的结构。它几乎可以按照所描述的只是缺少一个“{}”而工作，但访问它的方式有点奇怪。

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

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