Question

我正在尝试使用jquery从json数组中选择一行。这就是我所拥有的：

$(document).ready(function() {

    $.getJSON( "js/collectie.json", function(data) {
        jsoncollectie = data;
    })

    $( "#collectie li" ).click(function(){

        var thumb_id = $(this).data("id");

        for(var i = 0; i < jsoncollectie.stoelen.length; i++){

            if(jsoncollectie.stoelen[i].ref == thumb_id){
                $("#detailimage").attr('src', jsoncollectie.stoelen[i].image);
                $("#detailimage").attr('title', jsoncollectie.stoelen[i].title);
                $("#title").html('<h4> '+jsoncollectie.stoelen[i].naam+' </h4>');
                $("#secondaryimage").attr('src', jsoncollectie.stoelen[i].secondaryimage);
                $("#secondaryimage").attr('title', jsoncollectie.stoelen[i].secondarytitle);
                $("#description").html('<p> '+jsoncollectie.stoelen[i].description+' </p>');
            }   
        }
    });
});

现在，当我点击列表项（#collectie li）时，控制台输出“ReferenceError：jsoncollectie未定义”。我不知道为什么会这样做，我很确定它在两周前发挥作用。对javascript / jquery还不太了解，但我正在慢慢学习。

Answer 1

$(document).ready(function() 
{
    // Provide access to data outside of the getJSON call
    var m_oJsonCollectie = null;

    // Get the data
    $.getJSON( "js/collectie.json", function(data) 
    {
        // Set the data
        m_oJsonCollectie = data;

        // Apply the click handler
        $( "#collectie li" ).click(function()
        {
            var thumb_id = $(this).data("id");

            for(var i = 0; i < m_oJsonCollectie.stoelen.length; i += 1)
            {
                if(m_oJsonCollectie.stoelen[i].ref == thumb_id)
                {
                    $("#detailimage")   .attr('src',   m_oJsonCollectie.stoelen[i].image);
                    $("#detailimage")   .attr('title', m_oJsonCollectie.stoelen[i].title);
                    $("#title")         .html('<h4> '+ m_oJsonCollectie.stoelen[i].naam+' </h4>');
                    $("#secondaryimage").attr('src',   m_oJsonCollectie.stoelen[i].secondaryimage);
                    $("#secondaryimage").attr('title', m_oJsonCollectie.stoelen[i].secondarytitle);
                    $("#description")   .html('<p> '+  m_oJsonCollectie.stoelen[i].description+' </p>');
                }   
            }
        });
    });
});

JS具有块级范围，因此除非您提供对它们的访问权限或者它们在全局范围内声明（这被认为是不好的做法），否则您不会获取函数之外的值。

此模式应该可以帮助您保持数据的可访问性，并且只有在getJSON调用成功时才应用单击处理程序。

Answer 2

使用deferred methods

检查是否收到并返回了您的getJSON请求

// Syntax that will shed light to your issue :
$.getJSON
(
    "js/collectie.json",
    function (oJSON) { /*success*/ }
)
.done(function()   { /* succeeded */ })
.fail(function()   { /* failed    */ })
.always(function() { /* ended     */ });

由于注释以及仅在getJSON的成功处理程序中声明的变量未定义，我得出了这个结论。由于包含JSON的变量未定义，因此必须永远不会调用成功处理程序。可能是您尝试获取的JSON路径不正确。

要完成的方法的文档：

<强>更新

知道响应是304，结果未定义是重要的细节。 jQuery已经解决了这个问题here

这实际上是正确的，因为ifModified标头尚未设置为false。

要解决此问题，请使用ajaxSetup()修改标题。

注意：jQuery不推荐使用此方法，但在这种情况下它可以正常工作。

// place this is document ready handler before making any calls.
$.ajaxSetup({ ifModified : false });

点击即可从json中选择

2 个答案: