Question

我想使用AJAX从我的数据库中获取样式列表。样式有一个类别FK，我想用它来将样式分类为JSON对象，然后使用该JSON和JavaScript根据用户选择的类别填充选择列表。

这是我的代码：

$(document).ready(function () {

    var styles = {
        "cat1": [],
        "cat2": [],
        "cat3": [],
        "cat4": []
    }

    $.getJSON("/Inventory/GetStyles", function (data) {
        $(data).each(function (i, d) {
            var n = {
                "StyleID": d.StyleID,
                "Name": d.Name,
                "CategoryID": d.CategoryID
            };

            switch (d.CategoryID) {
                case 1:
                    styles.cat1.push(n);
                    break;
                case 2:
                    styles.cat2.push(n);
                    break;
                case 3:
                    styles.cat3.push(n);
                    break;
                case 4:
                    styles.cat4.push(n);
                    break;
            };
        });
    });

    alert(styles.cat1[0].Name);
});

当我使用debugger;并逐步完成时，我发现一切似乎都运转正常。 styles按预期填充数据，但警报永远不会消失。相反，我收到一个错误：

TypeError：styles.cat1 [0]未定义

这很令人困惑，因为在调试时，我可以将鼠标悬停在一起，看到styles.cat1[0].Name具有它应该具有的值。但奇怪的是，这只有在我将debugger;语句放入我的AJAX调用中时才有效，如下所示：

example a

如果我将debugger;语句移到AJAX调用之外，styles.cat1[0].Name将更改为undefined，如下所示：

example b

我不知道如何做到这一点。非常感谢任何帮助。

Answer 1

您正在尝试在ajax调用完成之前访问styles.cat1 [0]。将警报线移动到回调函数

$.getJSON("/Inventory/GetStyles", function (data) {
        $(data).each(function (i, d) {
            var n = {
                "StyleID": d.StyleID,
                "Name": d.Name,
                "CategoryID": d.CategoryID
            };

            switch (d.CategoryID) {
                case 1:
                    styles.cat1.push(n);
                    break;
                case 2:
                    styles.cat2.push(n);
                    break;
                case 3:
                    styles.cat3.push(n);
                    break;
                case 4:
                    styles.cat4.push(n);
                    break;
            };
        });
        alert(styles.cat1[0].Name);
    });

Answer 2

正如其他人所指出的，您的alert()在Ajax请求返回之前就已经发生了。

这意味着alert()必须是success回调函数的一部分。为了使这更容易，你应该开始使用jQuery的 deferred 回调范例。

比将所有内容都塞进单个回调函数要简单得多。比较：

$(function () {
    $.getJSON("/Inventory/GetStyles")
    .then(function (data) {
        var styles = {};
        $.each(data, function (i, d) {
            var catN = "cat" + d.CategoryID;

            if (!(catN in styles)) {
                styles[catN] = [];
            }

            styles[catN].push({
                StyleID: d.StyleID,
                Name: d.Name,
                CategoryID: d.CategoryID
            });
        });
        return styles;
    })
    .done(function (styles) {
        alert(styles.cat1[0].Name);
    });
});

推荐阅读http://api.jquery.com/category/deferred-object/

操作JSON：从基本的JSON到带有数组的更复杂的JSON？

2 个答案: