创建 getJSON 对象

Question

我使用 jQuery 的 getJSON 方法成功调用了 Coldfusion 数据库控制器。返回的信息以以下格式返回：

{
    "COLUMNS": ["PRODUCT_HIERARCHY", "WEBPRODLINE", "POSITION", "FEATURES", "BENEFITS", "LINKS", "VIDEOS", "IMAGE_CUTAWAY", "MARKEDASNEW"],
    "DATA": [
        ["23456689", "ProdName1", "A Feature 1", "A Benefit 1", "url", "vid_url", "img_name", "N"],
        ["234566891", "ProdName2", "A Feature 2", "A Benefit 2", "url", "vid_url", "img_name", "N"]
    ]
}

我现在希望将返回的信息存储为一个对象，然后可以在本地进行过滤，而不是再次调用数据库。问题出在initializeView函数中。这是相关的脚本：

$(document).ready(function() {

    var productsFlag = false;
    var enableLog = true;

    var allProducts = $.getJSON(jsonURL, { method: "getAllProducts", returnformat: "json" }, function(data) {
        productsFlag = true;
    });

    waitOnJson();

    function waitOnJson() {
        //this shows up in the log
        logThis('areProductsReady?');
        if (productsFlag) {
            //this shows up in the log
            logThis('productsFlags ready');
            initializeProductView();
        } else {
            //this shows up in the log
            logThis('productsFlags not ready');
            t = setTimeout(waitOnJson, 100);
        }
    }

    function initializeProductView() {
        //this shows up in the log
        logThis('initializeProductView');
        //this displays [object Object]
        alert(allProducts);
        //this displays undefined
        alert(allProducts.DATA);
        $.each(allProducts.DATA, function(i, item) {
            //this doesn't show up in the log
            logThis(item[1]);
        });
    }

    //as you can tell, this writes out to a debug console on the page
    function logThis(eventString) {
        if (enableLog === true) {
            $('<p/>').append(eventString).appendTo("#log");
        }
    }

});

我确信问题在于我对 getJSON 返回的内容缺乏了解，但我要么喝了太多咖啡因，要么喝了咖啡因不足，而我没有看到它。帮助！

另外，对我的阻塞等待步骤有什么想法吗？我希望能够在几个不同的函数中使用数据，但我还需要在初始化视图之前等待它加载。

Answer 1

首先，您不必像现在这样等待 json 响应。 getJSON 方法调用中的函数仅在收到响应时返回。当它执行时，它会返回 JSON 调用的结果作为方法调用的第一个参数。所以你可以做这样的事情（为了简单起见，我去掉了很多东西）：

$(document).ready(function() {

    $.getJSON(jsonURL,
    {
        method: "getAllProducts",
        returnformat: "json"
    }, function(allProducts) {  //This function only executes when the response is received.

        //You access your products array here and do whatever you need with them
        alert(allProducts != null);

    });


});

希望这能让事情有所澄清。

编辑：阅读完您的评论后，如果您对initializeProductView方法中的警报感到困惑，则可能是因为getJSON方法不返回JSON AJAX请求的结果，而是返回一个jqXHR 对象。这就是 .DATA 属性未定义的原因。如果您做了一些达到此目的的操作，它可能会起作用（假设您返回的 JSON 有一个 .DATA 成员）：

var allProducts = null;

$.getJSON(jsonURL,
    {
        method: "getAllProducts",
        returnformat: "json"
    },
    function(data) {
        productsFlag = true;
        allProducts = data;
    }
);

对于我之前的误解，我深表歉意。

Answer 2

为什么不在 .getJSON() 中提交的匿名回调函数中执行当前等待步骤中的所有内容？它更加干净，并且您不必继续执行 setTimeout 工作。

至于 initializeProductView() 发生了什么，它显然被调用了。请发布它的代码。您肯定需要在回调中使用 data 参数执行某些操作。目前尚未使用。

作为参考和仔细查看，这里是 getJSON 页面：http:// api.jquery.com/jQuery.getJSON/

---

编辑：您没有对 JSON 响应执行任何操作。在回调中，您应该对数据参数执行一些操作。您如何在 initializeProductView() 中访问它？

---

编辑2：您的ready调用的匿名函数未正确关闭。

---

编辑3：仔细观察，您已将 waitOnJson()、initializeProductView() 和 logThis() 定义为匿名函数的方法。当调用这些函数时，您就像调用顶级函数一样调用它们。您的匿名函数实际上应该只执行工作，而不是定义要调用的函数。